How to use one single alerts store in Redux when using combineReducer

Question

I have the following React modules:

reducers/index.js

import {combineReducers} from 'redux';
import {connectRouter} from 'connected-react-router';
import Paths from './Paths';
import Messages from './Messages';

const reducerHistory = (history) => combineReducers({
    router: connectRouter(history),
    messages: Messages,
    paths: Paths,
})

export default reducerHistory;

reducers/Messages.js

import {
  SHOW_MESSAGE,
  CLEAR_MESSAGE
} from '../constants/ActionTypes';

const INIT_STATE = {
  showMessage: false,
  alertType: null,
  message: null
}

const Messages = (state = INIT_STATE, action) => {
  switch (action.type) {
    case CLEAR_MESSAGE: {
      return {
        ...state,
        showMessage: false,
        alertType: null,
        message: null
      }
    }
    case SHOW_MESSAGE: {
      return {
        ...state,
        showMessage: true,
        alertType: action.payload.alertType,
        message: action.payload.message
      }
    }
    default:
      return {
        ...state
      }
  }
}

export default Messages;

reducers/Paths.js

import {
  CONNECT_PATH_SUCCESS,
  CREATE_PATH_SUCCESS,
  PATH_STEP_SUCCESS,
  OPEN_PATH_SUCCESS,
  FETCH_PATHS_SUCCESS,
  UPDATE_PATH_SUCCESS,
  SET_LOADING,
} from '../constants/ActionTypes';

const INIT_STATE = {
  connection: false,
  pathsList: [],
  path: null,
  data: null,
  metadata: null,
  prevStep: null,
  nextStep: null,
  currentStep: null,
  currentColumns: [],
  loading: false,
  breadCrumbs: [],
}

const Paths = (state = INIT_STATE, action) => {
  switch (action.type) {
    case CONNECT_PATH_SUCCESS:
      return {
        ...state,
        connection: true,
        loading: false
      }
    case CREATE_PATH_SUCCESS:
      return {
        ...state,
      }
    case OPEN_PATH_SUCCESS:
      return {
        ...state,
        data: action.payload.data.data.entries,
        metadata: action.payload.data.data.meta,
        nextStep: action.payload.data.data.previous_entity,
        prevStep: action.payload.data.data.next_entity,
        currentStep: action.payload.data.data.current_entity,
        currentColumns: action.payload.data.data.entity_columns,
        loading: false
      }
    case PATH_STEP_SUCCESS:
      return {
        ...state,
        data: action.payload.data.data.entries,
        metadata: action.payload.data.data.meta,
        prevStep: action.payload.data.data.next_entity,
        nextStep: action.payload.data.data.previous_entity,
        currentStep: action.payload.data.data.current_entity,
        currentColumns: action.payload.data.data.entity_columns,
        loading: false
      }
    case FETCH_PATHS_SUCCESS: {
      return {
        ...state,
        pathsList: action.payload.paths.paths.paths_list,
        loading: false
      }
    }
    case UPDATE_PATH_SUCCESS: {
      return {
        ...state,
        metadata: action.payload.metadata.newMetadata,
        loading: false
      }
    }
    case SET_LOADING:
      return {
        ...state,
        loading: true,
      }
    default:
      return {
        ...state,
      }
  }
}

export default Paths;

I want Messages.js reducer to handle error, warning and info alerts of the whole system, so I need other reducers, such as Paths.js to dispatch Message.js actions in order to set on or off the alerts state. I thought of dispatching Messages.js actions from other reducers, but I read here that it shouldn't be done.

So my question is how can I manage alerts information in Redux from a single reducers, instead of having to reply it on every reducer?

You can call from the client to both messages.js and paths.js, you don't have to call paths.js from messages.js. Each time you want to manage the messages - call it from the client, and so paths. If you need something to be shared, create a new reducer for both actions. — Or Assayag, Nov 30 '20 at 18:00
@OrAssayag That's exactly what I am trying to avoid. Currently I can handle alerts from reducers but I have to reply such management on each reducer, but such redundancy occurs only because I haven't found a way to use a single reducer for all stores. What you propose to dispatch both actions from clients would be the oposite of what I pursue, because that way each component would need to handle alerts logic while, by giving it to reducers, components only have to check for alerts to display or not. — HuLu ViCa, Nov 30 '20 at 18:33
@OrAssayag I can't grasp you proposal of "create a new reducer for both actions", if you share and example or a model code as an answer and it works, you'll collect the points awarded. — HuLu ViCa, Nov 30 '20 at 18:33

How to use one single alerts store in Redux when using combineReducer

0 Answers0