标签：network draftState dva value immer state 使用

dva文档

immer 使用文档

### immer 作用

• 当我们调用 immer 的 API produce时，immer 将内部暂时存储着我们的目标对象（以 state 为例）
• immer 暴露一个 draft （草稿）给我们
• 我们在 draft 上作修改
• immer 接收修改后的draft，immer 基于传入的 state 照着draft 的修改 返回一个新的 state

###### immer 使用

 this.setState((prevState) => {
      return produce(prevState, draftState =>{
        draftState.address.city.area = 'JingAn';
        draftState.address.city.postcode = draftState.address.city.postcode + 10;
      });
  });

dva 注册

import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

// 3. Model
app.model(require('./models/network').default);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

dva models

./models/network 文件

import request from '../utils/request';
import { produce } from 'immer';

export default {
  namespace: 'network',
  state: {
    info: {
      relationship: '同学',
    },
    list: [
      { name: '源', age: 26, city: '北京' },
    ],
    articles: [],
  },

  subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-line
    },
  },

  effects: {
    *getList({ value }, { call, put }) {  // eslint-disable-line
      const res = yield call(request, value.url)
      console.log(res.data.data.articles, 'km')
      yield put({ type: 'save', value: res?.data?.data?.articles || [] });
    },
  },

  reducers: {
    save(state, action) {
      return produce(state, draftState => {
        draftState.articles = action.value;
      })
    },
    add(state, action) {
      return produce(state, draftState => {
        draftState.list = [...draftState.list, action.value]
      })
    }
  },

};

页面使用

import React, { useEffect } from 'react';
import { connect } from 'dva';

function IndexPage({ dispatch, network }) {

  const addNeteork = () => {
    dispatch({ type: 'network/add', value: { name: '婷', age: 24, city: '北京' } })
    console.log(network, 'network')
  }

  useEffect(() => {
    dispatch({ type: 'network/getList', value: { url: '' } }) // url 接口地址
  }, [])

  return (
    <div>
      <button onClick={addNeteork}>添加关系</button>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect(({ network }) => ({ network }))(IndexPage);

标签：network,draftState,dva,value,immer,state,使用
来源： https://www.cnblogs.com/yuan-190214/p/15956146.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。