react如何集成redux
集成 Redux 到 React 的步骤
安装依赖
确保项目已安装 redux 和 react-redux。通过以下命令安装：
npm install redux react-redux创建 Redux Store
在项目中创建 store.js 文件，初始化 Redux store 并定义 reducer。
import { createStore } from 'redux';
// 初始状态和 reducer
const initialState = { count: 0 };
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
default:
return state;
}
};
const store = createStore(reducer);
export default store;使用 Provider 包裹根组件
在应用的入口文件（如 index.js）中，用 react-redux 的 Provider 包裹根组件，并传入 store。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);连接组件到 Redux
在需要访问状态的组件中，使用 connect 函数将组件与 Redux store 连接。
import React from 'react';
import { connect } from 'react-redux';
const Counter = ({ count, increment, decrement }) => (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
const mapStateToProps = (state) => ({
count: state.count,
});
const mapDispatchToProps = (dispatch) => ({
increment: () => dispatch({ type: 'INCREMENT' }),
decrement: () => dispatch({ type: 'DECREMENT' }),
});
export default connect(mapStateToProps, mapDispatchToProps)(Counter);可选优化：使用 Redux Toolkit
对于更复杂的场景，推荐使用 @reduxjs/toolkit 简化 Redux 逻辑。
安装 Redux Toolkit
npm install @reduxjs/toolkit重构 Store 和 Reducer
使用 createSlice 自动生成 action creators 和 reducer。
import { configureStore, createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { count: 0 },
reducers: {
increment: (state) => { state.count += 1 },
decrement: (state) => { state.count -= 1 },
},
});
export const { increment, decrement } = counterSlice.actions;
const store = configureStore({ reducer: counterSlice.reducer });
export default store;在组件中使用生成的 Actions
通过 useDispatch 和 useSelector 钩子简化代码。
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './store';
const Counter = () => {
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
};
export default Counter;
