Redux-saga store modal状态存放问题
发布于 6 年前 作者 liaoyinglong 3033 次浏览 来自 问答

虽然本站是node专场,但是觉得问个react的问题也应该可以

场景:

  1. 用 Modal 弹出一个表单,用户填写必要信息后创建新的项
  2. 后台返回提交表单提交成功后才关闭
  3. 提交失败不关闭modal

伪代码:

function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
      //  假设这里是提交表单成功,可以关闭modal
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});.
     //  假设这是 提交表单失败,不允许关闭弹框
   }
}

疑问:

  1. 在使用redux-saga的前提下,这个modal的visible状态存放在哪里? 放在store还是组件内部
  2. 放在store里面,显示或者隐藏modal都是通过action来触发,可以比较好的在提交表单数据给后台之后根据后台返回码来判断是否关闭modal,但是放在store又感觉略显啰嗦
  3. 放在组件内部,我不太清楚怎么在组件内获取后台返回的状态,
4 回复

既然都用了redux-saga,那就直接把这个状态放到store里管理啦,这样省事的多。 为了避免让人觉得觉得乱,可以放到某个状态对象的子属性下,比如 userInfo = { creating: false, edting: false, data: { } }

这里的creating就类似于visible,同时还有在用户信息编辑等状态也可以一并放到里边,把真正的用户信息放到data里。

@tinycold

老哥,那么打开弹框是要通过派发个action来控制吗

我就是觉得这样好麻烦。。

要那么麻烦干嘛,payload的callback解决

@jnotnull

callback这个处理方式总感觉那么别扭。

不过确实可行的一个方法

3Q

回到顶部