Link to the original text: When do I know I'm ready for Redux? , need to go online scientifically.
Recently, I was learning Redux in React, and I just found this article on Google. I thought the dynamic graph inside was very interesting, so I thought of translation.
PS: Before reading the article, you need to understand what React's props and state are, and I didn't translate all of them, but only the parts I was interested in.
What is Redux?
ReduxIt is a library focused on application state management , and it is a common tool library used in Reactapplications .
Why we should use Redux
Premature optimization is the root of all evil. —Donald Knut
This is a guideline when we build programs, which is Reactwhy we choose to use Reactlocal component state to start managing our application state when we initially build our latest application.
The new React app was working great for the first few weeks, but as the version iterated, we started to find the difficulty of program management increasing!
Day1
We started using Reactlocal component state to manage the application.
React uses one-way data flow, which means that the parent component passes its own state as a property to the child component.
Day5
We've added more functionality, some components need to share their state, but they're not parent and child relationships with other components.
But that's ok, we solved this problem with "raised state" .
This means that we hoist the state (and the functions that change this state) to the closest parent component (the Container Component).
We bind these functions to the container component and pass them down as properties.
This means that child components can trigger state changes in their parent components, which will update all other components in the tree .
Day20
However, as more functions and components were added, we found that there was too much interaction between components, and statethe code of some components became very bloated in order to manage the interaction between components.
We can only watch our code base become more and more like a bowl of spaghetti, the code is chaotic.
As you can see, the way state is updated and dispersed across the application is getting more and more complex.
1. A component needs to share its state with several components
2. The props that occur when a component's state changes need to be passed across several components
3. The program becomes more and more difficult to debug
if you start encountering some of the above problem, which means Reduxthat .
This communication hell between components is more than a pain to manage. . . .
How does Rudex improve the predicament?
Since I personally think that Mr. Ruan Yifeng 's concepts in the Redux introductory tutorial are more specific, I have used some of the content of Mr. Ruan Yifeng's article here.
First, not all Reactapplications need to use Redux.
If you're not sure whether to use Rudexit, then you don't need it.
If you're stuck with an unsolvable problem (like the one we just had), this Rudexmight be what you need.
The design idea of Redux is very simple, just two sentences:
1. The whole system is a state machine, and the view and the state are in one-to-one correspondence
2. All the states are stored in an object
Here is a brief introduction Rudexto the concept:
Store
StoreIt is where the state data of the application components is kept, and you can think of it as a container. There can only be one for the entire application Store.
State
StoreObjects contain all data. If you want to get the data at a certain point in time, you need to Storegenerate a snapshot of . This time-point data set is called State.
At the current moment State, you can store.getState()get .
ReduxIt is stipulated that one Statecorresponds to one View. As long as it is the Statesame , Viewit is the same.
You know State, you Viewknow what it's like, and vice versa.
Action
Statechanges in , will lead Viewto changes in . However, users can't Statetouch it, only touch it View.
Therefore, Statethe change must be Viewcaused by .
And Actionis Viewthe notification issued by , indicating that a change Stateshould occur.
Actionis an object, in which the typeattribute is required and represents Actionthe name of , and other attributes can be set freely.
Reducer
StoreActionAfter receiving , a new one must be given State, so that Viewwill change. This calculation process is called . is a function that takes and current as arguments and returns a new one . Also because is a pure function, the same can be guaranteed , and the same must be obtained , and the page refresh can also be guaranteed.
StateReducer
ReducerActionStateStateReducerStateView
ReduxEvery time we dispatch an action, this triggers our Reducerfunction, which updates our Store, thus making Viewthe refresh. Now our application looks like this:
