The article is translated from the source: https://hackernoon.com/the-guide-to-core-redux-concepts-ncu3tcw
In a React application, data is fetch
in the parent component
and then passed to the child component
via props
.
Things get complicated when there are multiple classes of component
and props / state
(and function
that change this state
) are passed through multiple component
to go from origin to destination. This link can be difficult to remember, and it leaves lots of room for errors.
1 2 | With Redux, any component can be connected directly to state. |
This doesn’t mean that data is no longer passed from parent component
to child component
via props
. Instead, this path can now be direct, with no props
passed from the parent component
to the child of child component
.
What is Redux?
It’s basically your state
management library, usually paired with React, where it controls the state
and puts it in a centralized place called the store
.
This time, when a component
starts to change, that information goes straight from it (blue circle) to the store
. From there, subsequent changes will be directed to all component
need updating.
Before diving into the code
, you should think about how Redux works conceptually. The diagram below illustrates a typical Redux flow.
Store
Redux Store
keeps your App state
. There are 3 important concepts:
getState()
gives you access to thestate
(store) of the Appdispatch(action)
allows update state (store)subscribe(listener)
to register listeners, allowing you to triger at all times
Action
In Redux, the action
provides information to the store
. Although Redux is different from MVC, the action
basically equivalent to a pattern in MVC. It has two parameters:
1 2 3 4 5 | const ADD_TODO = { type: “ADD_TODO”, payload: “Do stuff” } |
The first is the type
, there must be. payload
can be anything that describes the data being transferred. With this data in action
, reducer
will update store
.
Reducer
Reducer
performs an action
and is based on type
. It determines what needs to be done with the data (ie how it will affect the store
). Reducer
is where the store
is updated.
State
Finally, the state
is stored in the store
. That’s a concept you should be familiar with with React
. In short, it’s an object that represents the dynamic parts of the application: anything that can be changed on the client-side
.
Try creating a simple App using redux
Simple App use Redux
Step 1
Create App
Step 2
Install dependencies:
Step 3
Create the necessary files according to the following directory structure:
Step 4
To setup UI for the app, create scr/component/posts.js
Add the action.js
file
We will define the actions, be it objects or strings
Now we will create reducer.js
file
And the file store.js
Once all reducer
have been created, we need to use fucntion createStore
and introduce the newly created reducer
Finally, create the App.js
file
ReduxProvider
is a type of component
that can pass store
to child components through function connect (imported from react-redux
)
A simple App created like that, through here you can also roughly understand how to use Redux in your React App.
Thanks and hope this article is useful for your work