react如何集成redux
集成 Redux 到 React 的步骤
安装依赖
确保项目已安装 redux 和 react-redux。通过以下命令安装：
npm install redux react-redux创建 Redux Store
在 src/store.js 中定义 store，使用 createStore 并传入 reducer：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;定义 Reducer
创建 src/reducers/index.js 组合多个 reducer（示例为一个计数器）：
const initialState = { count: 0 };
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
default:
return state;
}
}
export default counterReducer;连接 React 组件
使用 Provider 包裹根组件（如 App.js），并传递 store：
import { Provider } from 'react-redux';
import store from './store';
function App() {
return (
<Provider store={store}>
<Counter />
</Provider>
);
}在组件中使用 Redux
通过 useSelector 和 useDispatch 访问状态和触发 action（示例组件 Counter.js）：
import { useSelector, useDispatch } from 'react-redux';
function Counter() {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
</div>
);
}异步 Action 处理（可选）
如需异步逻辑（如 API 调用），需使用中间件如 redux-thunk：
安装并配置 redux-thunk
npm install redux-thunk更新 store.js 以应用中间件：
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));定义异步 Action
function fetchData() {
return async (dispatch) => {
const response = await fetch('api/endpoint');
const data = await response.json();
dispatch({ type: 'SET_DATA', payload: data });
};
}类型安全（TypeScript 可选）
使用 @reduxjs/toolkit 简化类型定义和 store 配置：
npm install @reduxjs/toolkit示例 store 配置：
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './reducers';
const store = configureStore({
reducer: {
counter: counterReducer,
},
});
