Day 10: Reducing Redux
Tags: 100daysofcode, javascript, webdev, redux
Published: 2022-04-15 13:47:52

*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.
```js
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:
```js
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:
```js
let wholeStore = store.getState();
```
With just a call, you can get all the states.

To listen to changes, use `store.subscribe`:
```js
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. 
```js
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()`:
```js
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()`:
```js
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](https://github.com/Kemystra)!
Also on [Twitter](https://twitter.com/kemystra)!