Basic usage of dva

1. npm install -g dva-cli to install dva globally. 
2. dva new myApp --demo to create a dva project.
3. cd myApp npm start to start the project.
4. Define the model (1) Design the model first (2) Design the component (3) Connect the model and the
component . 5. Define state in the model (the data in the initial store in the state), effects (equivalent to action), and reducers execution process: (1) This.props in the component. In the dispatch() method, an object is dispatched to the effects. The object contains a type and the content to be dispatched, such as: {type:'filename/bikeAllInfo(effectsname)',payload:value} (2) After the effects in the model are received, pass The put method then dispatches an object of type and content to the reducers such as:




                  * bikeAllInfo({ payload }, { put }){
                        yield put({
                                      type: "setBikeAllInfo(redusersname)",
                                      payload:"value"
                                    })
                      }
 
           (3) After the reducers in the model receive the content sent by bikeAllInfo, they combine the variables defined in the state in the model and the received values, save them in the store, and then call them in this.props in the component.
                  
                    setBikeAllInfo (state, action) {
                         let bikeAllInfo = action.payload || {}
                         return Object.assign({}, state, {
                             bikeAllInfo,
                         })
                      },
 6. Introduce import {connect} from 'dva' in the component; use connect to connect the component when exporting
   
     const mapStateToProps = (state) => {
        return {
                state
          }
     }; 
    export default connect(mapStateToProps)(component name);

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324710323&siteId=291194637