A (Very) Simple Explanation of How Redux Works
Published: 2021-12-04 18:19:15

# Introduction

React. 
Sounds cool. 

Redux. 
Sounds ok... wait, what? What is happening to React *with Redux*??

This was my reaction when my teacher showed the class how to use Redux a week ago. I still can’t be friends with it. It is supposed to make React easier, but there are many codes and files scattering inside project file making Redux seem complicated.

So, I have decided to dedicate this article to get to know Redux better.
<br>
<br>
## Preparation to learn Redux...
To teach myself Redux, I created a simple React app.

{% stackblitz react-redux-app-ry25mg file=Cat.js %}

When "🐈Meow" button is clicked, a cat face appears, and when "🐕Bark" is clicked, one cat disappears from bottom.
<br>
<br>
## Explanation of Redux and its flow
Redux needs (roughly) 5 things.

- dispatch
- Action
- Reducer
- State
- Store

<br>
### 1. dispatch - instruction
Imagine there is a tiny person working inside an app. Let's call him "Mr. Store". (If I'm confusing you, please stop reading and search for more suited Redux articles for you!)

Us, humans, click a button "🐈Meow" and it fires an onClick event.

```javascript
<button onClick={increaseCatFunc}>🐈Meow</button>
```

What is `increaseCatFunc` of this onClick event?
It dispatches  `increaseCat` function:

```javascript
const mapDispatchToProps = (dispatch) => {
  return {
    increaseCatFunc: () => dispatch(increaseCat()),
    decreaseCatFunc: () => dispatch(decreaseCat()),
  };
};
```

`increaseCat` is the instruction that Mr. Store receives. He starts to take a look into Action.


### 2. Action - index
What I mean index here is the one you can find at the back of books.
Mr. Store searches for `increaseCat` ...and there he finds!

```javascript
export const increaseCat = () => {
  return { type: INCREASE_CAT };
};
```

This function returns an object which has `INCREASE_CAT`. Now Mr. Store knows what to refer to in Reducer.


### 3. Reducer - manual
Reducer is like a manual. It shows Mr. Store what to do.

Inside Reducer, each action is specified within each switch case. 

```javascript
export const catReducer = (state = initState, action) => {
  switch (action.type) {
    case INCREASE_CAT:
      const newCatArr = [...state.cats];
      newCatArr.push('(=^・・^=)');
      return { ...state, cats: newCatArr };

    case DECREASE_CAT:
      const decreaseCatArr = [...state.cats];
      decreaseCatArr.pop();
      return { ...state, cats: decreaseCatArr };

    default:
      return state;
  }
};
```
For `INCREASE_CAT`, Reducer tells Mr. Store to copy the current state array, push a cat face into it and return an updated state.


### 4. State

State is pretty easy to understand. It is a current "state" of something.
In the same file as Reducer, the code declare an initial state.

```javascript
const initState = {
  cats: [],
};
```

Mr. Store can know that `state.cats` is an array.
With `INCREASE_CAT` action, he inserts a new cat face in this array.

```javascript
cats:['(=^・・^=)']
```
Every time we click the button, the cat face is inserted to the end of the array.
```javascript
cats:['(=^・・^=)', '(=^・・^=)', '(=^・・^=)', ...]
```
*(And we can have an infinite number of cats!)*


Inside Cats.js, each entry in the array is rendered by using `map`. 
```javascript
<div>{catsArr && catsArr.map((cat) => <p>{cat}</p>)}</div>
```


### 5. Store
Finally, it is time to talk about Mr. Store. *What is he?*

Well, Store is the one that receives dispatch, refers to Action and change State according to Reducer.

Take a look at index.js.
```javascript
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { catReducer } from './reducers/index.reducers';

const store = createStore(catReducer);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
```
Reducer is imported and passed to `createStore`. Then, we wrap `<App />` with `<Provider>` component and pass `store`.
By doing this, we can now make use of Store.


Here is the image description of what I went through above.

![Redux-article-image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5umktzhgyithy0vqmhcw.png)
*[For better resolution (Go to Google Drive)](https://drive.google.com/file/d/1-jWyGf2dqvkYfswEmnBJRIfRJ3Hvyv6S/view?usp=sharing)*
<br>
<br>
# Conclusion(=^・・^=)
After writing this article, I feel that I am now a little closer to understanding Redux. Although I didn't explain further deep in detail, I was able to grasped the idea and flow of it.
Hopefully this article is useful to someone who's new to Redux like me!
<br>
Reference: [https://www.mitomex.blog/redux-concept/](https://www.mitomex.blog/redux-concept/) (Japanese)