[TOC] ### 1. dva中state中的數據的修改 > dva中不使用setState修改state中的數據，是定義的事件通過dispatch將action派發給reducers，reducers相當于倉庫，在里面不能直接修改state中的數據，要復制一份進行操作。也可使用effects調用reducers中定義的事件進行修改. ### 2. effects介紹 > `effects`用于處理異步操作，不能直接修改`state`，由`action`觸發，也可觸發`action`。它只能是`generator`函數，并且有`action`和`effects`兩個參數。第二個參數`effects`包含`put`、`call`和`select`三個字段，`put`用于觸發`action`，`call`用于調用異步處理邏輯(如數據請求)，`select`用于從`state`中獲取數據。 ### 3. effects的使用實例 ~~~ import React from 'react'; import { connect } from 'dva'; import styles from './IndexPage.css'; function IndexPage(props) { const additem=()=>{ const value = document.querySelector('input').value; //把跟新后的數據放在list中傳遞過去進行跟新 const actionchadd ={ type:'example/handleAdd', payload: value } props.dispatch(actionchadd); } //獲取輸入框中的值 const handleChange=(e)=>{ const actionchange ={ type:'example/handleChange', value:e.target.value } props.dispatch(actionchange); // console.log(e.target.value) } const deleteitem=(e)=>{ // console.log(e) const actiondeleteitem={ type:"example/deleteitem", payload:{ index:e, list:props.list } } props.dispatch(actiondeleteitem) } return ( <div className={styles.normal}> <input /> <button onClick={additem}>添加</button> <ul> {props.list.map((item, index) => { return <li key={index}><div><span>{item}</span><button onClick={deleteitem.bind(this,index)}>刪除</button></div></li> })} </ul> </div> ); } // IndexPage.propTypes = { // }; //用于連接模板文件與models文件 export default connect(({example})=>{ return{ //接收models的state中的數據 list: example.list, value:example.value } })(IndexPage); ~~~ ~~~ export default { namespace: 'example', state: { list: [], value: '' }, subscriptions: { setup({ dispatch, history }) { }, }, effects: { *fetch({ payload }, { call, put }) { // eslint-disable-line yield put({ type: 'save' }); }, * handleAdd({ payload }, { put, select }) { let list = yield select(({example}) => example.list); yield put({ type: 'updateStore', payload:{list:[...list,payload]} }); }, * deleteitem({ payload }, { put, select }){ const {index, list} = payload; const newList = list.filter((item, i)=>{ return index!==i }) yield put({type: 'updateStore', payload:{list:newList}}) } }, reducers: { updateStore(state, { payload }) { return { ...state, ...payload } }, save(state, action) { return { ...state, ...action.payload }; }, //接收傳遞過來的type和value并將其展開和state一起返回，換回出來的數據可供全局使用，在handleadd中可使用 handleChange(state, value) { // console.log(value.value) return { ...state, value: value.value }; }, }, }; ~~~