[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 }; }, }, }; ~~~