Minor things to make redux a bit easier to work with.

Over the period I’ve spent learning Redux, I noticed that there are mixed reviews in terms of people’s overall opinion of it. Most complaints I’ve heard so far are pertaining to the amount of boilerplate required to do simple tasks, and it is true. Redux does require tons of initial setup just to get simple things to work. In small applications, redux isn’t needed. But in larger applications, redux is a must-have to manage state. Because redux requires so much boilerplate code, it can be easy to mess things up along the way and come across very vague errors. This article serves to help make your redux management more organized and clean. It may not reduce the boilerplate needed but it will keep you from having a headache:

• Use variables for the type property: a common mishap is misspelling the type property whether it be in your action creator or reducer. The error that forms isn’t the most intuitive to go off of either. To make it easier on yourself you can create a separate JavaScript file inside the actions folder called types.js. In this file store all your types in one place and export them to the action creators and reducers.

• Create reducers in separate files: You could keep every reducer in the index.js and use the combineReducer() method from there. But reducers can become pretty sizeable and are not required to be in the same file. A good way to organize reducers is the use the index.js file only for the combineReducer() method. inside the reducers folder create separate files for each reducer and export them to the index.js file.

• Setting an initial state with an outside variable inside your reducer: This is very nuanced and depends on what you are working on and what values you are dealing with. Sometimes it can be beneficial to declare a variable with your initial state object inside of reducers. This is great especially if you are expecting to receive an object. This is a pretty simple trick with wide uses but it can help you organize the initial state and keep it clean if you are initializing multiple objects. It can also reduce the amount of information you have to sift through from your payload. For example, instead of utilizing the payload for boolean values, initialize it so you can save more time.