Redux useSelector 更新不够快

Question

我在我的项目中使用 redux 和 saga，在商店中发出 Axios 请求。为了向用户反馈请求是否成功，我在我的商店中存储了一个包含两个属性的对象 - errMsg 和 isFetching.

每当我发出请求时，我都会将 isFetching 设置为 true，然后如果请求成功，我会触发将 isFetching 更改为 false 的成功操作。我在我的组件中监听 isFetching 变化，如果 isFetching 的最后一个状态是假的，现在它变成了真，并且没有错误消息，那么我触发了一个成功模式。

此实现适用于 POST 请求，但当我尝试使用 DELETE 请求时，isFetching 从未更改为 true。

我尝试调试 redux，看到这两个动作正在发生，store 也在变化，但我的组件中的 effect 没有被触发。

我在 isFetching 变为 true 之间添加了一个延迟，然后它起作用了。

Redux 变化太快，useSelector 获取不到变化？有解决办法吗？

(不好意思解释代码，我的项目在封闭网络中，我不能在这里复制代码，如果解释不够好，请告诉我，我会尝试手动写代码）

编辑:

添加代码示例：

isFetching 变化的侦听器：

 const { isFetchingDelete, errMsgDelete } = useSelector(
    (state: StoreState) => ({
      isFetchingDelete: state.students.deleteState.isFetching,
      errMsgDelete: state.students.deleteState.errMsg,
    })
  );

 const prevIsFetchingDeleteRef = useRef<boolean>();

.........
  useEffect(() => {
    // trying to log the value of isFetchingDelete here, always logs false
    if (!isFetchingDelete && prevIsFetchingDeleteRef.current) {
      if (errMsgDelete) {
        Swal.fire();
      } else {
        Swal.fire();
      }
    }

    prevIsFetchingDeleteRef.current = isFetchingDelete;
  }, [errMsgDelete, isFetchingDelete]);

传奇故事：

  function* deleteStudentHandler(action: ActionType<typeof deleteStudent>) {
    try {
      yield call(StudentsService.delete, action.payload);
      // if I add a delay of 1000ms here it's working
      yield put(deleteStudentSuccess(action.payload));
    } catch (e) {
      yield put(deleteStudentFailure(e.message));
    }
  }

我的减速器：

  case: StudentsActionTypes.DELETE_STUDENT: {
    return {
      ...state,
      deleteState: {
        ...state.deleteState,
        isFetching: true
      }
    }
  }

  case: StudentsActionTypes.DELETE_STUDENT_SUCCESS: {
    return {
      ...state,
      students: [
        ...state.students.filter((student) => student.id !== action.payload),
      ],
      deleteState: {
        ...state.deleteState,
        isFetching: false,
      }
    }
  }

上面的代码在需要 300 毫秒的 post 请求上工作得很好，但是在需要 2 毫秒的删除请求（json-服务器）上它不起作用。添加我在代码注释中声明的位置，使代码工作。

Answer 1

我终于明白为什么会这样了。

在这里，我的问题是 StudentService.delete 没有返回 Axios 响应，因此没有返回承诺，saga 没有什么可等待的..

  function* deleteStudentHandler(action: ActionType<typeof deleteStudent>) {
    try {
      yield call(StudentsService.delete, action.payload);
      // if I add a delay of 1000ms here it's working
      yield put(deleteStudentSuccess(action.payload));
    } catch (e) {
      yield put(deleteStudentFailure(e.message));
    }
  }

希望这对可能遇到此问题的其他人有所帮助。

Redux useSelector 更新不够快

Redux useSelector is not updated fast enough

reactjs

redux

redux-saga