Reusable react-redux container components

Question

In my React/Redux app I am often facing with the problem of implementing components with state which should be used throughout the app. Let's take simple popup component as an example with open/close state which can be reused in any page. Here is two possible approaches I found:

• Use setState and "local" reducer (I use recompose.withReducer which is just syntax sugar for React's native setState) to manage its state. It looks easy and reusable until you need change the component's state in the other part of your page (close popup in out case). And you cannot just call some redux action to change the state.

• Keep the component's state in the Redux store. With such approach we can call closePopupAction({ id }) in any place of the components tree to change it's state.` But we need somehow put its reducer (which i want to keep in the popup's folder) to the root reducer when the component is mounted and delete it when the component is unmounted. Plus we can have multiples popups in the page and each of them have its own state.

Did anybody face with a similar problem ?

Answer 1

I think you should keep state of component in redux. You can create reducer for this component and use combineReducers function in this way:

rootReducer = combineReducers({
    moduleA: combineReducers({
      popupA: popupReducer("id1"),
      popupB: popupReducer("id2")
    }),
    moduleB: combineReducers({
      popupA: popupReducer("id3")
    })
  })
});

then when you call closePopupAction("id1") reducer can check id and change proper part of state.

PS: Id should be provided in better way :)