更新状态由另一个reducer管理

小编典典

更新状态由另一个reducer管理

reactjs

在我的React应用程序中，我的appReducer管理全局内容，例如通知，用户信息等。

该应用程序中的模块之一是库存模块，该模块具有自己的减速器，即ventureReducer。在redux商店中，我合并了所有的reducer。

我的问题是：当用户进行库存输入时，除了处理库存交易外，我还想显示一个屏幕通知，该通知在appReducer中处理。如何更新库存清单的appReducer下的displayNotification状态？

以下是我的应用简化程序：

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
    }
}

这是库存减少器：

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({}, state, {
                inventory: action.inventoryItem
            })

        case types.DISPLAY_NOTIFICATION : 
            return Object.assign({}, state, {
                app.displayNotification: action.value // <-- Is this how I access displayNotification which is managed by the appReducer?
            })

        default: return state
    }
}

我的更新库存操作需要同时调度SET_INVENTORY和DISPLAY_NOTIFICATION。我试图了解如何从stockReducer更新displayNotification，而displayNotification实际上是由appReducer管理的。

阅读 216

2020-07-22

共1个答案

小编典典

据我所知，按照@azium所说的，在Redux中，每个reducer都被分配了整个状态对象的一部分，并且它们的操作被限制在该部分中。他们不允许访问由其他任何reducer管理的状态片，因此
不应这样 做。

Redux的概念描述是它是一个 可预测的状态容器 。但是，当我查看我们要在此问题中尝试实现的目标时，如果我要访问/修改由我们的reducer-
A中的另一个reducer-B管理的状态，那么我认为该应用程序的可预测性和可维护性受到损害。

在不妥协任何内容或将不需要的逻辑移入我们的组件的情况下，我们可以实现我们所需要的。

选项1

内部 appReducer

您创建一个SET_INVENTORY做什么的类型DISPLAY_NOTIFICATION。您可以为一个调度类型的单个操作拥有多个订阅SET_INVENTORY（在appReducer和ventoryReducer中）。

如下所示，在appReducer中，如果操作类型为SET_INVENTORY或DISPLAY_NOTIFICATION，则reducer将更新key
displayNotification。

export default (state = initialState, action) => {

    switch (action.type) {

        case types.SET_INVENTORY : 
        case types.DISPLAY_NOTIFICATION : 
            return Object.assign({}, state, {
                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));
    };
}

2020-07-22