vendredi 16 mars 2018

Redux - How to organize the state to easily reuse reducers

TL;DR: What is the best pattern to reuse reducers, stores and views between several sub apps?

We are currently working with vanilla JS but want to make use of the Redux pattern to easy debugging and maintainability of our code base.

We have defined so far several entities based on the Redux idea:

  • Actions: It indicates a change.
  • Reducer: It gets and action and calculate the next state of the store.
  • Store: It saved the state of the application.
  • Controller View: It is a view that is connected to the store and forward all the props to the children views.
  • Presentation View: is a view that gets props and represent the data in the UI. It has not connection to the store and its main job is to get some data from the parent view and represent it on the DOM.

Using this concept we will create sub apps. Each of those sub apps would have an own store, reducer, controller view and will be using several presentation views. A sub app can be something small as a Button or bigger as a Chart.

We would like to have small presentation views to be able to reuse them across several sub apps (i.e. TextView, ImageView, ListView, AxisView...).

We would also like to have several standard reducers and actions that are taking part of some of general propose aspect that are stored on every sub app: Text handling with language dependency, measurement system dependency of values, ...

So far I have find out that the state on the store needs to be properly organised into domains so reducers that are taking part of a domain can be generalise between sub apps. The main problem is that some times, an action needs to trigger a change on the state in several domain of the state tree. For example, in a List sub app where the user is listing a some text and can select one of them, there is an action to set the whole list of values from the server (change the texts, change the images, ...). How would it be possible to have the modularity to be able to handle the texts from a common reducer (change language,...) and also be able to modify it all from a specific reducer of the sub app.

Thanks in advance!

Aucun commentaire:

Enregistrer un commentaire