1. Introduction
Redux is a library that helps you manage state for javascript (including plain js) applications. Redux was born inspired by the ideology of Elm language and architecture of Facebook Flux. So Redux is often used in conjunction with React and React Native.
2. Redux
If you have ever used React, you will know the React application manages the states in each component, to share the state must pass from the parent component to the child component or need to use the context so it is only suitable for applications. Small application, few states. But as the application grows and has many states, using the context will be quite difficult, very difficult to develop and maintain. Redux was born to help us create a STORE to store all data in one place and provide it for the entire application.
2.1. Ingredients of Redux
Redux includes 3 main parts:
1. Store:
Store is where all of the app’s state is stored. Here you can get, update, and delete through Actions
1 2 3 4 5 | <span class="token keyword">import</span> <span class="token punctuation">{</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> rootReducers <span class="token keyword">from</span> <span class="token string">'./reducers'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span> <span class="token punctuation">(</span> rootReducers <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
2. Action:
Actions are simply actions, events that we create to change the state
1 2 3 4 5 6 7 | <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">selectPost</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">post</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> type <span class="token operator">:</span> <span class="token string">"SELECT_POST"</span> <span class="token punctuation">,</span> payload <span class="token operator">:</span> post <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
3. Reducer:
Reducer is a fuction that takes state and event descriptions on that and returns the next state
1 2 3 4 5 6 7 8 9 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">activePostReducer</span> <span class="token punctuation">(</span> <span class="token parameter">state <span class="token operator">=</span> initialState <span class="token punctuation">,</span> action</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span> action <span class="token punctuation">.</span> type <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">"SELECT_POST"</span> <span class="token operator">:</span> <span class="token keyword">return</span> action <span class="token punctuation">.</span> payload <span class="token punctuation">;</span> <span class="token keyword">default</span> <span class="token operator">:</span> <span class="token keyword">return</span> state <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
2.2. Follow Redux in action
Step 1: On the componnet, an event of a user occurs such as clicking on an element, creating, updating, and deleting data.
Step 2: Action capture events on a component of the user, create an action performed, including type and payload (data)
Step 3: Action will be sent to Reducer via dispatch(action) function, Reducer will base on type of Action to know and get data in State and then update data.
Step 4: After the state has been changed, the component containing that state will also rerender again.
3. Conclusion
Through the article, I would like to introduce you basically the advantages and principles of Redux operation, in the following article I will apply Redux to ReactJs to perform state management. Thank you for watching my post.