React-Redux, How To Write Significantly Less Code
My article “MVC Implemented by React and Causality-Redux” described the theory behind the MVC implementation by React and causality-redux.
This article will demonstrate an actual application of causality-redux by comparing the react-redux asynchronous Reddit example located at ExampleRedditAPI with the MVC implementation by causality-redux. I counted a total of 292 lines of code not including blank lines in the example. However, it will be shown that causality-redux provides a redux solution for that same example using only 129 lines of code while also following the MVC programming paradigm making it much easier to understand and maintain.
The below will demonstrate this much more efficient redux solution and will follow along with the code in the same order as the redux solution. So, the first file is just index.js.
Next, the controller part of the implementation is shown.
The first part of the controller code is the set of controller functions that can be wired to the props of react components. Controller functions are responsible for shepherding commands from the react UI to the business logic in the model. Then the controller functions must update the redux store with the results from the business code such that when these changes are made in the redux store, react UI components will re-render those changes if required.
The second part of the controller is the declarative redux partition definition. A redux partition is just an allocated key at the top level of the redux store object. The redux partition definition defines the default state of the partition and the set of controller functions that can be made available to the react UI.
The third part of the controller basically wires the keys in the default state and the keys of the controller functions to the props of the input react component. The controller function establishControllerConnections then creates a redux wrapped connect component with the mapStateToProps and mapDispatchToProps generated internally for you and returns the wrapped component at the key uiComponent.
For the AsyncApp component above, the asyncPartition values selectedSubreddit, posts, isFetching and lastUpdated are made available in the props by causality-redux by passing them into the array at the storeKeys entry of the input object. If storeKeys is not defined then all defaultState keys will be passed into the props.
Also by default, all controller function listed at the key controllerFunctions in the partition definition will also be made available in the props. This can be overridden using an array of controller function keys from the partition with the input key changerKeys. Therefore, instead of writing code for mapStateToProps and mapDispatchToProps, you simple pass in the state keys and function keys that you want available to the component and causality-redux takes care of the rest for you.
The function establishControllerConnections also returns partitionState which is a proxy to the keys in the partition so that you may set redux partition store values by assignment. For example, partitionState is used above in controllerFetchPosts to get and set the cache entry in the partition. Also, setState allows you to set multiple partition store values all at once. Simple assignments would cause a react component to re-render for each assignment. So, setState is simply more efficient for this case.
Both partitionState and setState follow the rules of redux store updating and so these valuable features spare you the punishment of having to write reducers and action creators.
The next code file is in the model and is just the business code.
Note that the model/business code is always written in pure javascript so it is very simple to understand. Also, there is never any UI logic tangled in with the business code. So, this strategy allows the code to be reusable.
Now that the controller and model have been defined, next the UI view part of MVC will be shown. As with the redux example, the containers are presented first. The view only contains code that is necessary for UI presentation. Hence, business logic and program state are not entangled with the view when using the causality-redux solution. As such, it is very simple to understand just like the JavaScript business code.
This next container component has its props managed by the controller logic above. The controller passes into the props the partition store values selectedSubreddit, posts, isFetching, lastUpdated and also the controller functions handleChangeSubreddit, handleRefreshList.
Next, the components are shown.
Now compare the large bulk of code in the redux example with the above and you can see the tremendous savings in coding and time. In fact for this example, there is a 130% savings in code size and that does not include the reduction in code complexity. Moreover, react-redux programming can look very different depending on the developer. But, with causality-redux, you always see MVC. So, this type of code will always look the same no matter who develops the react app. Therefore, it is easier to understand, debug and maintain.
Consequently, causality-redux combined with react provide the following benefits vs react-redux:
- Significant reduction in code size.
- Significant reduction in code complexity.
- Adherence to the MVC standard so that all react apps look basically the same no matter who develops them.
- Adherence to the MVC standard so that the model, controller or view can be swapped out with having to re-code the other parts. This is very important especially for the UI view since that is what changes most.
I have put together a vscode/webpack environment that contains both the causality-redux and the react-redux solutions so that you can compare each and verify the results presented in this article. Simply click on the github link below. The installation instructions are at the link:
You can also download a complete vscode/webpack causality-redux development environment that contains all the modern webpack bells and whistles including hot-reloading and also contains many causality-redux code samples.
Simply download it, follow the simple installation instructions and you will be coding in the new react causality-redux MVC paradigm immediately:
