ReduxIt’s a data state management plug-in, whether it’s mobile or pc, when you use React or Vue to develop componentized SPA programs.
Sharing information between components is a very big problem. In the development of react, the use of React development system, most of them need to be combined with Redux.
The first step is to install.
When installing Redux, we often install react-redux.
The use of the second step Redux
ReduxDesign philosophy: Redux is a data management tool, we create a store variable to manage data. And this store is not created by air. The premise of creating it is to set up a management rule.
In the above code, our management rule is: data (that is, state) defaults to 0, INCREMENT is added to the incoming one, DECREMENT is subtracted to one. Store is used to manage data. What is the specific form of management?
First, a function is used to trigger a change in the data, called dispatch, which must be triggered in accordance with previously customized rules, otherwise it is invalid. Second, what happens when data change? That is, subscribe.
Functions defined are executed. Third, how to get the current data, that is, store.getState (). This is an ordinary publish and subscribe design mode, and it is also a customary design pattern of JS.
In particular, it is important to note that in a regular function, the data changes to return a new value, rather than modifying the original value directly.
The specific contents are shown below.
Redux Generally speaking, they are combined with React. How do they integrate them?
Step one: create store
The second step: create rules.
When using Redux, the rule mentioned just now is called reducer.
Look at the code of userinfo.js first.
Look at the code of index.js again.
The third step: create action
In practical applications, we need to break it up into several functions, that is, files in. / APP / actions, although only userinfo. JS is here. In userinfo.js, we divide every business operation into one.
Function that receives data, then breaks it up according to the reducer’s rules, and finally returns. Of course, the final result will still be handed over to dispatch to handle.
The fourth step: combine to React
Create store in./app/index.js and pass it to
Then look at. / containers / Hello. jsx, and in the Hello component you can get data and actions through this. props. userinfo and this. props. userinfoActions
How to get data and actions? We pass them to sub components, A and B components are responsible for displaying data, and C components are responsible for triggering actions.
Now we can run our project. See below.
Click Modify button
The page will change to
In the react-redux project, action is an object, where the type attribute is required and the reducer is a function that accepts a state and an action.
A new state is returned based on the type of action. Store is an object that holds data and has its own methods for getting and updating data.
This blog is sublimated from: public comment app video.
The complete demo is github:https://github.com/JserJser/reactWebApp/tree/master/react-redux.