如何使用 React Native 控制 Redux 工具包中的调度操作？

Question

如果我运行我的代码，dispatch(addPost(formData));被执行，而 thunkAPI 是运行ning navigation.navigate('PostList'); 在操作完成之前执行并移动到 PostList 屏幕。

但我想做的是当我执行 sendPostfunc 函数时，dispatch(addPost(formData));首先被触发，其次，thunkAPI.dispatch(postSlice.actions.purePost()); 被执行，第三，thunkAPI.dispatch(loadPosts()); 被执行并且动作完成，之后 navigation.navigate('PostList');我想创建运行并转到 PostList 屏幕。

如何修复我的代码？

这是我的代码

(Post.tsx)

    const sendPostfunc = useCallback(async () => {

      dispatch(addPost(formData));

      navigation.navigate('PostList');

    }, [dispatch,navigation]);

(action.tsx)

     export const addPost = createAsyncThunk(
      'post/addPost',
      async (data: Object, thunkAPI) => {
        try {
          const response = await axios.post('/post/addPost', data);

          thunkAPI.dispatch(postSlice.actions.purePost());

          thunkAPI.dispatch(loadPosts());
          return response.data;
        } catch (error: any) {
          return thunkAPI.rejectWithValue(error.response.data);
        }
      },
    );

Answer 1

将您的 navigate 调用移至 addPost（将其作为附加参数传递，类似于 redirectTo，将在加载帖子后执行的回调。
假设 loadPosts 也是一个 thunk，让它 return 一个 promise 这样你就可以 await 这项工作在 addPost 内部完成 - 在这里解释：https://redux.js.org/usage/writing-logic-thunks#returning-values-from-thunks

如何使用 React Native 控制 Redux 工具包中的调度操作？

How can I control dispatch actions in Redux toolkit with React Native?

javascript

reactjs

react-native

redux