React JS – The basics of redux
This article I would like to introduce basically about React JS – Redux, an open source library used by many React developers. For this article requires you to have knowledge of React-Js basic. If you have not learned basic react js then learn immediately, because ReactJs is a quite famous framework and large community, so it is easy to learn.
What is redux?
- Redux is an open source JavaScript library for managing application state. It is most commonly used with libraries like React or Angular to build user interfaces.
- Redux helps you write applications that run stably, run in different environments (client, server and local) and are easy to test.
- Focusing the status and logic of your application enables powerful capabilities such as undo / redo, state persistence, and more. According to the Redux homepage: https://redux.js.org/ (And there is also a simple concept of redux). I repeat that this article is only for you who already have basic knowledge about ReactJS.
State, Props, Handling event in React
Here I would like to remind you a little bit of knowledge about State, Props and Handling Event.
State (+): + It is for example an intrinsic value of a Component + Often used to perform some actions when onClick, onChange, onBlur … generally state-related actions + when creating a Component, the state value will be null and the state will be created as follows this.state = {type: 'viblo'} + When the state when changed, we have a certain action on the component and do As its state changes, the component and its subcomponents will be re-rendering
Props: + It is used to send data from the parent component to the child component + Props cannot be changed + Passing a props from parent to child is as follows: <Vibolo type = {props} />. With <Viblo /> is the component name and type = {props} is the props that are passed from parent to. In the component you want to call, just call this.props.props-name
Handling event: This is actually a form of event handling like we have learned jquery only + <button onClick = {this.clickMe} /> CLick me </button>. Because this article only teaches you about react, so writing the processing function, you understand it. It's about what you need to understand.
The mechanism of action of redux
If you have a Component (<App />) and its component is <TaskList /> but in it there is another son called <TaskItem /> then if you want to handle the event of the youngest son change state Of the App guy, you have to pass from father to the second son right. So if we have many levels, don't we have to transmit many times?
The App will handle the states, and pass the props down to the boys below
Events that the son wanted to handle to change the state of the APP guy
So it must go through a layer that is new TaskList to continue down the ListItem
And from this kid, handling the event and passing the required parameter to props.name-action (here is a function) to pass it back to the App guy
As far as we can see, this is quite complicated if our project is up to dozens of components .. then maybe we just continue to propagate like that, very difficult to handle and maintain. So that's when we use redux.!
This is the redux workflow, I would like to explain as follows:
- Store: As the most important guy, it's like a state repository, and when a component needs it, it will provide the state for that component.
- UI: are components
- Action: A user's action such as clicking the (onClick) button, submitting the file (onSubmit) …
- Reducer: Inside the store, it will do business and return us a new state
Principle of operation: When the component starts to perform certain actions, the actions will be sent to the reducer and want to perform must call the dispacher, the reducer will perform some work, then the reducer receives the corresponding action, (reducer) could be a big or small module) and it will update the new state in the Store and return the component and the rest is the finished component.
Here I have a small demo as follows: We need to install redux with: npm install redux –save;
var initialState = {}; used to create initial states for later processing.
The Reducer will be a function and I will take two parameters, one is the state and the other is actions. and state will have default value init .. I created above; and must return to the new state, because the reducer's purpose is to return the new state to the component to handle.
next is store var store = createStore (name reducer); When shown on the conlose we see the following and we leave the func getState ():
The store manager should state getState () to get the state from the reducer returned. This is basically the direction of redux, it makes it easier for us to manage states, and components that easily use states together are stored in the Store, so our code will be a lot easier.