Flux vs Redux: Now is Redux turn.

We are back! And in this new episode we are going to cover what Redux is and what brings to the table in the frontend development nowadays.

 


Redux Logo

If you read the previous episode on these series, we went into the nuts and bolts on Flux which is a pattern to develop React Applications using a Unidirectional Data Flow Approach.

Actually the pattern, looks quite nice, but some of the disadvantages of it is that with a large scale application or one with a lot of components involved there is a lot of boilerplate code involved talking about raising actions, stores and event registration between the component DOM events.

What Redux is, is practically an abstraction of many of the complexity that Flux has by providing a single store unit, actions , and framework event handling through a concept called “reducer”.

A reducer is a function that receives the current state of the app, and the triggered action.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export default function(state = initialState.feedbacks, action) {
switch(action.type) {
case CREATE_FEEDBACK:{
return [...state, action.payload];
}
case EDIT_FEEDBACK:{
let indexOfEditElement= _.findIndex(state,(item)=>{return item.id === action.payload.id});
return [...state.slice(0,indexOfEditElement),
action.payload,
...state.slice(indexOfEditElement + 1 )]
}
case LOAD_FEEDBACKS_SUCCESS:
return action.payload;
default: {
return state;
}
}
}

There is a single piece of state that will hold all of your application behavior across components, so you will receive it in here along with the action that was triggered, and pretty much similar to the stores, you’ll have to see which type of action was used to modify the state.

Up to this point things are quite similar, but actually the beauty of Redux is on the way things get returned from its reducer function.

It turns out that the reducer function must be what is called a “pure” function.That means a function which actually doesnt change the state or the structure of the elements that are being sent to it, instead it returns a new one.

Thats the beauty of Redux, as it you must return a new state on every action call, the Framework doesnt need to check which was the property that was changed,add or deleted. Instead bring a new one including the changes made thanks to this action. That principle is also know as Inmutability.

As you can see on the code, I return a new array, including the payload coming from the raised action. An action is simply a Javascript object that requires a “type” property and the rest is up to you. You can send whatever you want, in this case I just wrapped everything in a payload property.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default function(state = initialState.feedbacks, action) {
switch(action.type) {
case CREATE_FEEDBACK:{
return [...state, action.payload];
}
case EDIT_FEEDBACK:{
let indexOfEditElement= _.findIndex(state,(item)=>{return item.id === action.payload.id});
return [...state.slice(0,indexOfEditElement),
action.payload,
...state.slice(indexOfEditElement + 1 )]
}

 

On the next chapter we will see how we can raise actions and hook it up to reducers inside our React Components.

Share