reactjs – 更新由另一个reducer管理的状态
|
在我的React应用程序中,我的appReducer管理全局内容,例如通知,用户信息等.
应用程序中的一个模块是库存模块,它有自己的reducer,即inventoryReducer.在redux商店中,我将所有减速器组合在一起. 我的问题是：当用户进行库存输入时,除了处理库存交易外,我还想显示在appReducer中处理的屏幕通知.如何从inventoryReducer更新appReducer下的displayNotification状态？ 以下是我的app reducer： import 'babel-polyfill';
import * as types from '../actions/actionTypes';
const initialState = {
displayNotification: {}
};
export default (state = initialState,action) => {
switch (action.type) {
case types.DISPLAY_NOTIFICATION :
return Object.assign({},state,{
displayNotification: action.value
})
default: return state
}
}
这是inventoryReducer： import 'babel-polyfill';
import * as types from '../actions/actionTypes';
const initialState = {
inventory: []
};
export default (state = initialState,action) => {
switch (action.type) {
case types.SET_INVENTORY :
return Object.assign({},{
inventory: action.inventoryItem
})
case types.DISPLAY_NOTIFICATION :
return Object.assign({},{
app.displayNotification: action.value // <-- Is this how I access displayNotification which is managed by the appReducer?
})
default: return state
}
}
我的更新清单操作需要调度SET_INVENTORY和DISPLAY_NOTIFICATION.我试图了解如何从inventoryReducer更新displayNotification,其中displayNotification实际上由appReducer管理. 解决方法
跟着@azium所说的,据我所知,在Redux中,每个reducer都被分配了整个状态对象的一个??片段,并且它们的操作在该片段中受到限制.不允许它们访问由任何其他reducer管理的状态切片,并且它们不应该这样做.
Redux的概念描述是它是一个可预测的状态容器.但是,当我看到我们在这个问题中想要实现的目标时,如果我们要在reducer-A中访问/修改由另一个reducer-B管理的状态,那么应用程序的可预测性和可维护性就会受到影响. 在不妥协任何事情或将不需要的逻辑移入我们的组件的情况下,我们可以实现我们的需求. 选项1 在appReducer里面 您创建一个类型SET_INVENTORY,它执行DISPLAY_NOTIFICATION所做的事情.对于调度类型为SET_INVENTORY的单个操作,您可以拥有多个订阅(在appReducer和inventoryReducer中). 如下所示,在appReducer中,如果操作类型为SET_INVENTORY或DISPLAY_NOTIFICATION,则reducer会更新键displayNotification. export default (state = initialState,action) => {
switch (action.type) {
case types.SET_INVENTORY :
case types.DISPLAY_NOTIFICATION :
return Object.assign({},{
displayNotification: action.value
})
default: return state
}
}
选项2 创建一个耦合调度两个动作的方法, 让我们说你有一个动作 function setInventory(inventoryItem) {
return {
type: types.SET_INVENTORY,inventoryItem
};
}
和另一个行动 function displayNotification(value) {
return {
type: types.DISPLAY_NOTIFICATION,value,};
}
创建一个thunk来耦合它们： export function notifyAndSetInventory(notify,inventoryItem) {
return dispatch => {
dispatch(displayNotification(notify));
return dispatch(setInventory(inventoryItem));
};
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |