Sam Sam - 2 days ago 3
React JSX Question

Updating state managed by another reducer

In my React app, my appReducer manages global stuff such as notifications, user info, etc.

One of the modules in the app is the inventory module which has its own reducer i.e. inventoryReducer. And in the redux store, I combine all the reducers.

My questions is this: when a user makes an inventory entry, in addition to handling the inventory transaction, I want to display an on-screen notification which is handled in the appReducer. How do I update the state of displayNotification which is under appReducer from the inventoryReducer?

The following is my 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
}
}


And this is the 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
}
}


My update inventory action needs to dispatch both SET_INVENTORY and DISPLAY_NOTIFICATION. I'm trying to understand how I can update displayNotification from inventoryReducer where displayNotification is actually managed by the appReducer.

Answer

Following up with what @azium said, as far as I understand, in Redux each reducer is allocated a slice of the entire state object and their operations are restricted in that slice. They are not allowed to access the state slice managed by any other reducer, and they shouldn't do that.

The concept description of Redux is that it is a predictable state container. But when I look at what we are trying to achieve in this question, if we were to access/modify state managed by another reducer-B in our reducer-A, the predictability and maintainability of the app is compromised according to me.

Without compromising on anything or moving undesired logic into our components, we can achieve what we need.

Option 1

Inside appReducer

you create a type SET_INVENTORY which does what DISPLAY_NOTIFICATION does. You can have multiple subscriptions for the single action that dispatches type SET_INVENTORY (in appReducer and inventoryReducer).

As shown below, in appReducer, if the action type is either SET_INVENTORY or DISPLAY_NOTIFICATION, the reducer updates the 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
    }
}

Option 2

Create a method that couples the dispatching of two actions,

let's say you have an action

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

and another action

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

create a thunk to couple them:

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