1. Why learn React – DVA

  • The react project, Webpack, Redux, redux-Saga, were all written by ourselves. Anyone who has used it knows that redux is really troublesome
  • React-thunk is simple, but it is still not easy to use in some complicated scenarios and brings side effects to actions. Later I learned that react-DVA is indeed much more efficient to write

2. Introduction to demo project

Click the + sign button, immediately +1, but after a second (asynchronous operation), minus 1

3. How to set up DVA project

3.1 installation dva – cli

$NPM install dva-cli -g $dVA -v dva-cli version 0.9.1Copy the code

3.2 Creating an application

$dVA new counter // Once created, go to counter and start server $cd counter
$ npm start
Copy the code

4. Finish the project layout first

4.1 Rewriting the route of index.js in the SRC directory

// index.js
import Counter from './components/Counter'

app.router(({ history= > {})return (
        <Router history= {history}>
            <Switch>
                <Route path='/' exact component={Counter} />
            </Switch>
        </Router>
    )
});

Copy the code

Next, initialize the reducer data in index.js

app.model({
    namespace: 'count',
    state: {
        current: 0
    },
    reducers: {
        add(state, action) {
            let newCurrent = state.current + 1
            return{ current: NewCurrent}}}}) // namespace represents the namespace, which is the reducer name. // state represents the reducer data is an object. Add represents the type of action. Type. There are two parameters in the add function, the first state is the state defined above, that is {current: 0} // Action represents the triggered behavior typeCopy the code

Then go to the Components directory and create Counter. Js

import React, { Component } from 'react'
import { connect } from 'dva'
import styles from '.. /index.less'
class Counter extends Component {
    render() {
        return (
            <div className={styles.container}>
                <div className={styles.current}>
                    {this.props.current}
                </div>
                <div className={styles.button}>
                    <button onClick={() => this.props.dispatch({ type: 'count/add' })}>+</button>
                </div>
            </div>
        )
    }
}
exportDefault connect(state => state.count)(Counter) The // styles method used to connect React and redux adds a namespace to our CSSCopy the code

The index.less file is as follows

.container{
  width: 200px;
  padding: 20px;
  border:1px solid #ccc;
  box-shadow: 0 0 10px #CCC;margin: 50px auto; .current{ padding: 50px 0; text-align: center; font-size: 20px; } .button{ text-align: center; button{ width: 100px; height: 30px; font-size: 18px; }}}Copy the code

So, the first step, we have the style, and we can hit the plus sign, and we have a +1

5. Complete the asynchronous operation of the project

Asynchronous operations simply add the Effects property to app.model. App. modal transformation is as follows

let delay = ms => new Promise((resolve, reject) => {
    setTimeout(() => resolve('ok'), ms)
})
app.model({
    namespace: 'count',
    state: {
        current: 0
    },
    reducers: {
        add(state, action) {
            let newCurrent = state.current + 1
            return { current: newCurrent }
        },
        minus(state, action) {
            let newCurrent = state.current - 1
            return{current: newCurrent}}}, // Effects: *add(action, {call, put}) {yield call(delay, 1000) yield put({type: 'minus'}}}}));Copy the code

Here we add a add method in the effects, which calls the minus method in reducer and delays by 1 second

At this point, a simple DVA toy is complete