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.
Preparation to learn Redux...
To teach myself Redux, I created a simple React app.
When "🐈Meow" button is clicked, a cat face appears, and when "🐕Bark" is clicked, one cat disappears from bottom.
Explanation of Redux and its flow
Redux needs (roughly) 5 things.
- dispatch
- Action
- Reducer
- State
- Store
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.
<button onClick={increaseCatFunc}>🐈Meow</button>
What is increaseCatFunc of this onClick event?
It dispatches increaseCat function:
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!
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.
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.
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.
cats:['(=^・・^=)']
Every time we click the button, the cat face is inserted to the end of the array.
cats:['(=^・・^=)', '(=^・・^=)', '(=^・・^=)', ...]
(And we can have an infinite number of cats!)
Inside Cats.js, each entry in the array is rendered by using map.
<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.
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.
For better resolution (Go to Google Drive)
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!
Reference: https://www.mitomex.blog/redux-concept/ (Japanese)
Top comments (0)