Use redux in routing
Using redux in routing only requires two steps:
- Step 1 In the routing policy component (such as HashRouter), render the Route component, and in the Route routing rules component, introduce the application component processed by the connect method.
- Step 2 In the Provider component, render the routing policy component (such as HashRouter).
Notice:When the routing rules renders the component, the routing rules component is only responsible for passing routing-related data to the component, and other data (such as store data) will not be passed.
Therefore, if the components rendered by Route want to receive data from the store, we can only use the second method to render the components after rendering.
Router reducer
Router also provides a reducer method, we need to introduce react-router-redux
Provides routerReducer, representing the routed reducer
We also want to add to the application, so we need to use the combineReducers method to add multiple reducers
Parameters are objects:
key represents the state name (namespace)
value means reducer
Equivalent to module cutting module in vuex
After merge, accessing the state data in the component, you must carry the namespace
// Expand componentslet DealApp = dealFn(App);
let DealHome = dealFn(Home);
let DealList = dealFn(List);
let DealDetail = dealFn(Detail);
// Step 2 Determine the rendering methodlet routes = (
<HashRouter>
{/*<App></App>*/}
{/* 1 The application processed through routing rules */}
<Route path="/" component={DealApp}></Route>
</HashRouter>
)
// 2 In the provider, render routing rulesrender(<Provider store={store}>{routes}</Provider>, app)Redux expansion
State expansion
The state we currently operate are all data of the same value type
Therefore, we can directly manipulate the state data
If state is a reference type data, we cannot operate directly on state
We need to define a new object first, manipulate data on the new object, and finally merge it with the original state into a new object, and return this new object as the new state data
We can merge objects through the methods provided by ES6.
Since the following data will overwrite the previous data, we place the new object behind the state object.
Action Expansion
action is a communication object that carries message data
Static action
The action objects we currently define are all static action objects.
That is to say, the data in the action is fixed
Applicability will be restricted. To improve applicability, we can define dynamic actions
Dynamic action
Dynamic action is a function that can receive parameters. We return different actions according to the parameters, which enhances the applicability of the action object.
Asynchronous action
So far, the actions we send are synchronous because there is no asynchronous operation in the action.
Asynchronous action applies to scenarios:
react is a view layer framework, but sometimes we put requests in the component, which will make the component do too many data business logic things. Sometimes we want to put this part of the requests in the action implementation. At this time, this action is an asynchronous action
Asynchronous action compared to synchronous action:
- Synchronous action (such as dynamic action), is a function, and the return value is an object (that is, the published aciton object)
- Asynchronous aciton is a function, and the return value is a function
- In the return value function, the parameter is dispatch
- We can implement asynchronous operations in the return value function, and when the operation is completed, we can publish synchronous action messages through the parameter dispatch.
- Redux does not support asynchronous by default. If you want to use asynchronous action, you must install middleware
Asynchronous action middleware
redux-thunk is an asynchronous action middleware
We can install it in redux through the applyMiddleware method.
The method parameters are middleware, which return a new method to expand the createState method, and will get a new store creation method. At this time, we use this new method to create the store, and the new store has the function of asynchronous aciton.
This is the article about the expansion of redux and redux knowledge points in React routing. For more related React redux and redux content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!