React Native 如何在redux中仅在状态初始化后调度

5n0oy7gb 于 2022-11-17 发布在 React

关注(0)|答案(2)|浏览(118)

大家好，对不起，我的英语，这是我的第二语言 *.所以我有一个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

来源：https://stackoverflow.com/questions/74406201/how-to-dispatch-only-after-state-initialization-in-redux

2条答案

按热度按时间

2ul0zpep1#

在async函数中没有得到更新的值，因为在react中，更新状态是异步的。在react呈现该组件后，可以得到更新的状态。
您可以有两个useEffect。在第一个useEffect中，调度getMe函数。此useEffect将运行一次。然后从存储中获取用户值。然后在第二个useEffect中，将该状态传递到依赖项数组中。现在添加一个条件以检查用户是否不为空，然后调度getCategories函数。

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

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

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

赞(0）回复(0）举报 2022-11-17

2vuwiymt2#

在调用getCategories之前，请等待getMe得到解析。没有人能保证getCategories会在n ms内得到解析。

useEffect(() => {
    const getData = async () => {
      await dispatch(getMe()); // wait for the promise to resolve
      dispatch(getCategories());
    }
    getData();
  }, []);

或者也可以在getCategories形式转换中调用getMe：

export const getCategories = createAsyncThunk(
  "categories/get",
  async (_, thunkAPI) => {
    try {
      await thunkAPI.dispatch(getMe()); // wait for the promise to resolve
      console.log(thunkAPI.getState().user.user);
      // The thunkAPI.getState().user.user value is null
      return await categoryService.getCategories();
    } catch (error) {
      thunkAPI.rejectWithValue(error);
    }
  }
);

并在组件中调用getCategories

// your component
useEffect(() => {
  dispatch(getCategories());
}, []);

赞(0）回复(0）举报 2022-11-17

我来回答

React Native 如何在redux中仅在状态初始化后调度

2条答案

相关问题

热门标签

最新问答