React dva implementation code

dva

dva is a data flow solution based on redux and redux-saga. In order to simplify the development experience, dva also has built-in react-router and fetch, which can be transformed into a lightweight application framework.

Using dva

Define a model, a bit like redux-toolkit.
Use connect

Connect like redux's connect.

start up.
Then how to dispatch actions.

Find the corresponding reducer through the corresponding instructions and dispatch it.

This is the basic operation of dva, which is relatively easy to use.

Implementing DVA

Idea: Encapsulate a function, create a store, collect reducers and states through models, and change the method name in reducers.

First, the model. Because there are multiple models, we need to collect them.

First, change the method name in rducer through namesapce.

Then save it.

Then it can be injected through Provider.

Transform the reducer of the model and return the reducer accepted by redux. At this time, the state of the model will not change. It is just the initial state. What the component actually accepts is the state in redux.
This getReducer will only be called once to return the real reducer.

Initial implementation completed.

Support async

Dva is integrated with redux-saga, so its usage is similar.

When creating a model, you can create a saga middleware through effects. Then dispatch the corresponding action

accomplish

Idea: process the effects of each model, convert them into corresponding saga functions, use takeEvery to listen to each attribute name (such as asyncADD, converted to takeEvery('asyncADD', ()=>{}), etc.), then create a middleware through createSagaMiddleware provided by redux-saga, and use the run method to execute the saga functions converted from the effects in each model.
Code:

Use getSagas to transform the effects of each model and store them in an array, then run them one by one through forEach.
See how to convert

It can be seen that the effects of each model will be converted into function*(){} in getSaga, and then the effects of a single model will be traversed, and each attribute will be processed by *asyncADD(){}, as shown in the figure. A saga function is returned through getWatcher, and a child process is started through fork, which will not interfere with the operation of the main process.

Each getWatcher returns a saga function (generator function), which monitors the current attribute (key) through takeEvery and executes the subsequent effects. Here we need to modify the Put method of redux-saga to make it do some prefixType logic separately.
This is basically done. The effects of each model will be processed by the saga function to run, and each method of the effects is converted into a key and listened to through takeEvery. Here you also need to add a prefix to each method name of the effect

That's how it's done.

It can run normally.

Implementation of router

There is no difference in using
dva inherits connected-react-router

So the usage is similar to it. Note that asynchronous logic can only be written in effects. Reducer is synchronous and cannot continue to dispatch.

accomplish:

Based on connectd-react-router

Remember how to use connectd-react-router? The first step is to create a router object.

The second step is to use middleware.

Pass the api to app._router as a parameter. That's it.

When he sends a push, it will be intercepted and processed by the routing middleware and pushed to another page.

This is the end of this article about react dva implementation. For more relevant react dva implementation content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!