redux中如何让两个独立的reducers联系
时间: 2024-05-08 08:17:07 浏览: 8
在Redux中,可以使用combineReducers函数将多个独立的reducers合并成一个reducer,从而使它们联系起来。combineReducers函数接受一个对象作为参数,对象中的每个属性都是一个独立的reducer函数,combineReducers函数会将这些reducer函数合并成一个新的reducer函数,当action被dispatch时,它会遍历所有的reducer函数,执行它们并返回新的state对象。
举个例子,假设我们有两个独立的reducers,一个处理用户信息,另一个处理购物车信息,我们可以将它们合并成一个reducer并将它作为createStore函数的参数:
```
import { combineReducers, createStore } from 'redux';
// 用户信息reducer
function userReducer(state = {}, action) {
switch (action.type) {
case 'SET_USER_NAME':
return {
...state,
name: action.payload
};
default:
return state;
}
}
// 购物车信息reducer
function cartReducer(state = [], action) {
switch (action.type) {
case 'ADD_TO_CART':
return [...state, action.payload];
default:
return state;
}
}
// 合并reducer
const rootReducer = combineReducers({
user: userReducer,
cart: cartReducer
});
// 创建store
const store = createStore(rootReducer);
```
在上面的例子中,我们将两个独立的reducers合并成了一个rootReducer,并将它作为createStore函数的参数来创建store。当我们dispatch一个action时,rootReducer会遍历所有的reducers,执行它们并返回新的state对象。例如:
```
store.dispatch({ type: 'SET_USER_NAME', payload: 'Alice' });
store.dispatch({ type: 'ADD_TO_CART', payload: { id: 1, name: 'Product A' } });
```
这样,我们就可以在一个action中同时更新用户信息和购物车信息,并且这两个reducers之间也可以互相访问彼此的state。