DVA data flow

One todolist( Potato silk ) Case familiarity dva Data flow and how to use dva Developing front-end projects
Project address ：https://gitee.com/JasonShow/todo-dva.git

dva Data flow chart

Browser input address ( route router) Match to the corresponding modular (Model), Module and view layer (View) adopt connect Connect , take Model The state stored in... Is passed to View,View Use dispatch take action Pass to Model, change Model The state stored in , Realize one-way closed-loop loop with complete data .

Model

Use dva-cli Projects built src There's a next one. models Catalog , each model It's right here , Centralized management status . I created example.js It can be seen as a model. First look at it. Model There's something in it .

// example.js
export default {
    

  namespace: 'todo-dva', //  Unique identification of the module ,connect as well as dispatch Need to use 

  state: {
     //  Place for centralized storage , State is data , From redux
    list: [
      {
     id: 1, name: ' Glory of the king ', checked: true },
      {
     id: 2, name: ' Tiktok ', checked: false },
      {
     id: 3, name: ' Eat chicken ', checked: true },
      {
     id: 4, name: ' Liao sister ', checked: false },
    ],
  },

  subscriptions: {
     //  Module subscription , The subscription inside will be called automatically when the module is loaded 
    setup({
     dispatch, history }) {
      // eslint-disable-line
    },
  },

  effects: {
     //  Handling asynchronous operations (Action), For example, send a request to the back end , From redux-saga
  },

  reducers: {
     //  Handle synchronous operations (Action), according to state( At present model Storage status ),payload(dispatch Load at ( Parameters passed )), The process returns to a new state , From redux
    addTodo(state, {
     payload }) {
    
      state.list.push({
     id: +new Date(), name: payload, checked: false })
      return {
     ...state }
    },
    delTodo(state, {
     payload }) {
    
      return {
     ...state, list: state.list.filter(item => item.id !== payload) }
    },
    editTodo(state, {
     payload }) {
    
      state.list.find(item => item.id === payload.id).name = payload.name
      return {
     ...state }
    },
    changeState(state, {
     payload }) {
    
      const todo = state.list.find(item => item.id === payload)
      todo.checked = !todo.checked
      return JSON.parse(JSON.stringify(state))
    },
    toggleChecked(state, {
     payload }) {
    
      state.list.forEach(item => {
    
        item.checked = payload
      });
      return JSON.parse(JSON.stringify(state))
    },
    clearComplated(state, {
     payload }) {
    
      return {
     ...state, list: state.list.filter(item => !item.checked) }
    },
  },
};

effect

stay effect Can handle asynchronous operations , For example, send a request to the back end , for instance ：

effects: {
    
 *getUserList({
     payload, resolve, reject }, {
     call, put, select }) {
    
   try {
    
     const {
     code, data, message, totalSize } = yield call(getUserList, payload);
     if (code === CODE) {
    
       yield put({
     type: 'putUserList', payload: {
     userList, total: totalSize } });
     } else {
    
       reject(message)
     }
   } catch (error) {
    
     console.log(error);
   }
 },
}

• payload: dispatch Load at ( Parameters passed )
• resolve：dispatch Callback upon successful delivery
• reject：dispatch Callback when delivery fails
• call： Execute asynchronous functions
• put: Send out a Action, Be similar to dispatch
• select: Status can be obtained across modules , grammar ：const state = yield select(model => model[' Module name ']);

view

//  Search for 
const handleSearch = (pageNum: number, pageSize: number) => {
    
  new Promise((resolve, reject) => {
    
    dispatch({
     type: 'user/getUserList', payload: {
     offset: pageNum, size: pageSize }, resolve, reject });
  }).then(msg => {
    
    getRoleList()
  }).catch(msg => {
    
    message.error(msg)
  })
};

In the realization of todolist It should be noted that ：

1. react hook Update status (setState) It's asynchronous , So in setNowId(id) Post write editInput.current.focus(),editInput.current.focus() Will be executed first, resulting in editInput Double click cannot get focus , terms of settlement ：

useEffect(() => {
    
  editInput.current.focus()
}, [nowId])

2. dva Unable to perceive the change of reference data type , therefore reducers The returned status must be new , No, the side component cannot get the latest status .