Day 10: Reducing Redux

The Fyeamn tehcinuqe syas taht taecinhg a sbujcet makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post

Store, Reduce, Action!

Redux is a state management library. So, what is that?

Remember the main paradigm of React? The app should have a single source of truth, where only a single component hold the state (or truth) to be passed down to its children.

In React, the state is stored as a simple JavaScript object. For small projects, this is enough. But when your app starts handling multiple user inputs and APIs, you need a more complex data structure to organize them 😵‍💫.

Enter Redux! They act as a manager to make organizing complex states more intuitive 🥳. States are stored in a separate component, freeing React components from this job.

How it works

States are stored in a store. We can requests state value from the store, or listen to any change to states. To update a state, we need to pass an action to the store.

Storing states 🏪

For Redux to manage states, we need to initialize a store to keep the state.

Redux.createStore(reducer);

reducer is a function that would be used by Redux. Basically, when an action is passed, Redux will use this reducer function to determine what to do with the state. We gonna talk about reducer after this.reducer is a function that would be used by Redux. Basically, when an action is passed, Redux will use this reducer function to determine what to do with the state. We gonna talk about reducer after this.

Reducer function

This is an example syntax of a reducer:

const reducer = function(state = 0, action) {
  switch(action.type) {
    case "increment":
      return state + 1;
      break;

    case "decrement":
      return state - 1;
      break;

    default:
      return state;
  }
}

The initial state is declared as the default parameter, just like in the ES6 specification (yes, please revise). Action is an object passed to the store to update states (we gonna talk about this later).

Depending on the action type, we return the new state, and I mean new. Do not return a modified old state, and be careful because Redux won't slap your hand for this. It's just gonna hide a bug deep down to smash you later 👿.

Also, a switch statement is common in Redux. Get used to it.

Get states, or listen to their suffering change

Unlike Walmart, you don't have to pay to grab the state. You call it with the store.getState() function:

let wholeStore = store.getState();

With just a call, you can get all the states.

To listen to changes, use store.subscribe:

store.subscribe(killEveryone);

The killEveryone function will be executed when any state is changed, you cannot pinpoint a single state to listen to.

Actions

Updating a state means passing an action to the store. An action is a JavaScript object with type as a mandatory key. The value type key would be the name of the action, e.g: LOGIN, PRESSED, etc.

let actionLogin = {
  type: "LOGIN"
};

You can also pass data as key-value pairs inside the action.

To pass an action to the store, use store.dispatch():

store.dispatch(actionLogin);

A function that returns an action can also be used the parameter. In this case, the function is called the action creator.

A small tip

If you don't like dumping all sorts of states and action into a large vat inside the store, use Redux.combineReducer():

const loginReducer = function(state = {auth: false}, action) {
  if(action.type === "LOGIN"):
    return ({ auth:true });
}

const colorReducer = function(state, action) {
  return color = "white";
}

Redux.combineReducer({
  login: loginReducer,
  color: colorReducer
});

The above setup will create a nested object: The outside one have keys `login' and 'color'. Inside each key is the object containing state defined by its reducer.

Afterwords

Compared to React, Redux is a small break for me, before diving into its integration with React and the final projects. It's nice to take a breather once in a while 😌.

Follow me on Github!
Also on Twitter!