如何仅在 redux 中的状态初始化后调度答案

【问题标题】：How to dispatch only after state initialization in redux如何仅在 redux 中的状态初始化后调度
【发布时间】：2022-11-12 07:55:26
【问题描述】：

大家好，对不起，我的英语是我的第二语言. 所以我有一个看起来像这样的 Redux 状态：

const initialState = {
  user: null,
  isLoading: false,
};

每次我加载主屏幕（我使用的是 React Native）时，我都会从本地存储中获取一个用户并将其置于以下状态：

useEffect(() => {
    dispatch(getMe());
    dispatch(getCategories());
  }, []);

使用 getMe 函数，我从本地存储中获取用户，使用 getCategories 函数，我向 api 发出请求并获取数据。但是如果我在获取类别时采用状态值，我会得到一个空值（默认值）：

// Get categories
export const getCategories = createAsyncThunk(
  "categories/get",
  async (_, thunkAPI) => {
    try {
      console.log(thunkAPI.getState().user.user);
      // The thunkAPI.getState().user.user value is null
      return await categoryService.getCategories();
    } catch (error) {
      thunkAPI.rejectWithValue(error);
    }
  }
);

我只是对如果我超时 getCategories 函数会发生什么感兴趣：

useEffect(() => {
    dispatch(getMe());
    setTimeout(() => dispatch(getCategories()), 1);
  }, []);

它有效。但我真的不认为这是一个好方法，那么我该如何“正确”解决这个问题？

先谢谢了！！！

【问题讨论】：

标签： react-native redux redux-toolkit

【解决方案1】：

您没有在异步函数中获得更新的值，因为在反应中，更新状态是异步的。在 react 渲染该组件后，您可以获得更新的状态。

您可以有两个 useEffects。在第一个 useEffect 中，dispatch getMe 函数。这个 useEffect 会运行一次。然后从商店获取用户价值。然后在第二个 useEffect 中，将该状态传递到依赖数组中。现在添加一个条件来检查用户是否不为空，然后调度 getCategories 函数。

// Get The User Value From Store
const user = useSelector((state) => ...);

useEffect(() => {
    dispatch(getMe())
}, [])

useEffect(() => {
    if (user) { 
        dispatch(getCategories())
    }
}, [user])

【讨论】：