Redux 状态不会立即更新答案

【问题标题】：Redux state doesn't update immediatelyRedux 状态不会立即更新
【发布时间】：2021-11-07 09:20:22
【问题描述】：

我有一个超级简单的问题为什么我的 redux 状态没有立即更新？

const { reducer, actions } = createSlice({
  name: "professionals",
  initialState: {
    loading: false,
    lastFetchList: undefined,
    list: undefined,
    professional: undefined,
    filters: {
      virtual: false
    }
  },
  reducers: {
    professionalsListRequested: (professionals, action) => {
      if (action.payload.withLoading) professionals.loading = true;
    },
    professionalsListRequestFailed: (professionals, action) => {
      professionals.loading = false;
    },
    professionalsListReceived: (professionals, action) => {
      professionals.lastFetchList = Date.now();
      professionals.list = action.payload.data.dataArr;
      professionals.loading = false;
    },
    virtualUpdated: (categories, action) => {
      categories.filters.virtual = action.payload;
    }
  },
});
export const { virtualUpdated } = actions;
export default reducer;

这是我的切片。这是组件的代码：

  const dispatch = useDispatch();
  const filters = useSelector((state) => state.professionals.filters);
  const handlePressOnVirtual = async () => {
    console.log("Before" , filters.virtual)
    await dispatch(virtualUpdated(!filters.virtual));
    console.log("after" , filters.virtual)
  };

当handlePressOnVirtual 函数被调用时，console.log(s) 都会打印状态的前一个值。

【问题讨论】：

标签： redux react-redux redux-toolkit

【解决方案1】：

当您仍在handlePressOnVirtual 函数中时，您仍在closure 中，因此所有引用仍将是您现有的filters

因此，您需要等待再次重新渲染 useSelector 才能再次调用，然后才会出现新值。

查看最新更改的一种方法是将您的日志放入useEffect：

useEffect(() => {
  console.log("after" , filters.virtual)
},[filters.virtual]);

【讨论】：