Dva中在effects中获取state的值

简介: Dva中在effects中获取state的值

Dva中在effects中获取state的值



首先,看官网给出effects中的例子 effects详情见


it('put multi effects in order', done => {
    const app = create();
    app.model({
      namespace: 'counter',
      state: {
        count: 0,
        resolveCount: 0,
      },
      reducers: {
        dump(state, { payload }) {
          return {
            ...state,
            ...payload,
          };
        },
      },
      effects: {
        *changeCountDelay({ payload }, { put, call }) {
          yield call(delay, 200);
          yield put({ type: 'dump', payload: { count: payload } });
        },
        *process({ payload }, { put, select }) {
          yield put.resolve({ type: 'changeCountDelay', payload });
          const count = yield select(state => state.counter.count);
          yield put({ type: 'dump', payload: { resolveCount: count } });
        },
      },
    });


从这个例子我们可以看出

在effects中想要获得state中的值,需要解构出select方法


用法具体如下

const xxx = yield select( state => state.namespcae(你自己起的命名空间).想要取得的值)


运用


export default {
  namespace: 'CWL_UserSettingsModel',
  state: {
    pagination:{},
    userData: [],
    userInfo: {},
  },
  effects: {
    *addUser({payload},{call,put,select}){
      console.log('addUser',payload);
     const pagination = yield select(state => state.CWL_UserSettingsModel.pagination)
      const response = yield call (UserSettingService.addUser,payload)
      const {code} = response;
      if (response.code === 0) {
        message.success('新增用户成功');
        yield put({
          type: 'getList',
          payload: pagination,
        });
      }
      else{
        message.error("新增用户失败");
      }
    }
  },


通过这句话取到了state中pagination的值

const pagination = yield select(state => state.CWL_UserSettingsModel.pagination)


另外,如果你想在model中取到另一个model中state值,我们可以举一反三一下,只要在后面添加上你想取的model的namespace的值即可


比如:我想一个model中取到globalModel中的值

const globalModelData = yield select((state) => state.globalModel);


这样,我们就可以在一个Model中取到globalModel中的state值了

目录
相关文章
|
7月前
|
前端开发 JavaScript BI
轻松搞定vue3+Pinia-2-修改state-patch-actions
轻松搞定vue3+Pinia-2-修改state-patch-actions
149 0
|
9月前
|
JavaScript
element-ui(vue版)使用switch时change回调函数中的形参传值问题
element-ui(vue版)使用switch时change回调函数中的形参传值问题
84 0
|
资源调度
时间轴组件react-native-step-indicator使用
时间轴组件react-native-step-indicator使用
658 0
时间轴组件react-native-step-indicator使用
|
1月前
|
JavaScript 前端开发 开发者
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
|
1月前
|
前端开发
react获取input的value值
react获取input的value值
65 0
|
1月前
|
前端开发
React State(状态)
React State(状态)
|
7月前
|
前端开发
react获取input值
react获取input值
|
10月前
|
存储 前端开发 JavaScript
React 三大属性之state的使用详解
React 三大属性之state的使用详解
|
10月前
|
存储 前端开发
定时器中使用React hooks的 state 值不变的解决办法
定时器中使用React hooks的 state 值不变的解决办法
132 0
|
前端开发 数据安全/隐私保护
React高阶组件(Higher-Order Components)及其应用
React高阶组件(Higher-Order Components)及其应用
60 0