reactjs - 更新由另一个 reducer 管理的状态

Question

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

应用程序中的模块之一是库存模块，它有自己的 reducer ，即 inventoryReducer。在 redux 存储中，我组合了所有 reducer 。

当用户输入库存时，除了处理库存交易之外，我还想显示一个在 appReducer 中处理的屏幕通知。如何从 inventoryReducer 更新 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
    }
}

这是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({}, 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。我试图了解如何从 inventoryReducer 更新 displayNotification，其中 displayNotification 实际上由 appReducer 管理。

Answer 1

跟进什么azium said :

I think what you're trying to do is the wrong approach. What's stopping you from a) listening to SET_INVENTORY in your appReducer or b) dispatch both actions from your component?

据我了解，在 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({}, state, {
                displayNotification: action.value
            })

        default: return state
    }
}

选项 2

创建一个方法来耦合两个操作的分派(dispatch)，

假设您有一个操作

function setInventory(inventoryItem) {
    return {
        type: types.SET_INVENTORY,
        inventoryItem
    };
}

还有另一个 Action

function displayNotification(value) {
    return {
        type: types.DISPLAY_NOTIFICATION,
        value,
    };
}

创建一个 thunk 将它们耦合起来:

export function notifyAndSetInventory(notify, inventoryItem) {
    return dispatch => {
        dispatch(displayNotification(notify));
        return dispatch(setInventory(inventoryItem));
    };
}