elm architecture in redux
In classical Redux, which side effect is handled by thunk middleware, is not fractal (a term that is nicely explained by @stalz)
Even with some new Redux additions, like redux-saga, are also not composable in a fractal way with the rest of architecture.
I think elm architecture has found the proper way to do it right. Beside composing Views, State and Reducers (which are already composed in classical Redux), Actions and Effects should be composed too. All that leads to composition of application pieces at the higher level.
Redux is awesome. In order to make redux architecture fractal. We only need two adjustment in our application.
- Use redux-loop as side effect solution.
It will make the effects composable and the reducers more domain centric. It give you elm architecture side effect like solutions.
- Don't use
bindActionCreators, just passdispatchas the parameter to the components.
What the component needed is model (the data) and dispatch (a way to communicate with the rest architecture). It doesnt need the action callback as the parameters.
This repo is port of the elm architecture examples in redux with redux-loop to show the benefits of hierarchical composition everywhere. In this example, I used my fork of redux-loop and redux-logger to demonstrate how to log the high order action and async action. (Please open the console in the live demo.)
I hope we can make elm architecture to the mainstream to create a truly reusable and well encapsulated application.