Why you need to create an action, call a reducer, and update state in one JavaScript Object.
Redux is the answer to a React nightmare. If your dream is to build a robust JavaScript app with many different components, this is going to save you a lot of headaches. All of your components will have access to state in one JavaScript object with Redux.
What makes Redux useful?
React is awesome. We all know it, but there’s one key problem: it stores all data in different components. You can imagine how confusing an application might get if it has lots of them. You’d have to keep up with state and props for every single component.
What makes Redux so useful is that it’s a single source of truth. When using Redux, you won’t need to go searching for each component’s parent to read props like you normally would. They are conveniently stored in one JavaScript object. Redux wraps the component tree in the JavaScript object, allowing components to connect to the app’s state.
Redux encourages storing all crucial data in your application in a JavaScript object separate from React components. The JavaScript object you create with Redux allows you to grab any part of the data inside any component that might need it. The pattern or flow of information in Redux is what makes it so great: first you have an action which calls a reducer that will then update the state.
Actions in Redux
Any time you update the state in Redux, you must create an action first. This action is just a plain old JavaScript object, but it must have a type key. You create the set of strict instruction Redux will use for how to update state. This action is then passed to the reducer as an argument. These actions are also made available to components. Any component you connect will be able to modify the state using an action you’ve defined.
Reducers: The beauty of Redux
Reducers in Redux are simply functions with a switch/case statement. They act in accordance with the type in the action you created.
Reducers are pure functions meaning they are contained and won’t affect other areas of your application. Pure functions are also determined by their input, which means the function will always return the same value given a specific input. Sometime I say that Redux “updates the state,” but in actuality, it doesn’t. It’s just a lot easier to say it like that. Because reducers are pure functions, they never update state; rather, they create a new state object.
An example of a function that’s not pure:
function changeAge(fortyYearOld){
fortyYearOld.value += 25
return fortyYearOld;
}A function that is pure:
function reducer(state = {count: 0, action) {
switch (action.type) {
case 'ADD_PERSON':
return [...state, action.count];
default:
return state;
}The first function’s return value will change depending on the age of the person you pass through. The second function’s return value is dependent upon which action is passed through, so there are only two possible return values here.
Dispatch
These functions can technically be called anything, but they are conventionally named dispatch. A call to dispatch should call a reducer, update the state, and render a change. Dispatch is really simple: it initiates the change in state by calling a reducer.
Bringing it all together
Implementing reducers with Redux gives you another level of abstraction. You can have one reducer to rule them all if you configure your code correctly. This means you can apply your reducer throughout your application, cleaning up your code, and storing your state in one location. Enjoy the powers of Redux. I know I will.
