在 React Native 应用中使用 Redux 管理状态时，经常需要在 Redux action 中执行一些异步操作，例如网络请求。当这些异步操作完成后，我们可能需要进行页面跳转。本文将介绍如何在 Redux action 中正确地触发导航，并避免一些常见的错误。
理解 Redux Thunk
Redux Thunk 是一个 middleware，它允许 action creator 返回一个函数而不是一个 action 对象。这个函数接收 dispatch 和 getState 作为参数，可以在函数体内执行异步操作，并在操作完成后 dispatch action。
问题分析
常见的错误是在 action creator 中直接调用另一个 action creator，而没有将其 dispatch 出去。例如，在以下代码中：
export const registerUser = (formData, navigation) => async dispatch => {
try {
const response = await axios.post(`${config.END_POINT}/users`, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
await AsyncStorage.setItem('token', response.data.token)
dispatch({ type: 'auth/setToken' })
loadUser(navigation) // 错误：没有 dispatch loadUser
} catch (error) {
console.error(error.message)
}
}
export const loadUser = (navigation) => async dispatch => {
try {
const response = await axios.get(`${config.END_POINT}/auth`)
dispatch({
type: 'auth/setUser',
payload: response.data
})
navigation.navigate('Home')
} catch (error) {
console.error(error.message)
}
}registerUser action creator 调用了 loadUser(navigation)，但并没有 dispatch 它。loadUser(navigation) 返回的是一个异步 action creator 函数，只有被 dispatch 后才能执行其中的异步操作和导航。
解决方案
要解决这个问题，需要使用 dispatch 函数将 loadUser(navigation) dispatch 出去。修改后的代码如下：
export const registerUser = (formData, navigation) => async dispatch => {
try {
const response = await axios.post(
`${config.END_POINT}/users`,
formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}
);
await AsyncStorage.setItem('token', response.data.token);
dispatch({ type: 'auth/setToken' });
dispatch(loadUser(navigation)); // 正确：dispatch action!
} catch (error) {
console.error(error.message);
}
};
export const loadUser = (navigation) => async dispatch => {
try {
const response = await axios.get(`${config.END_POINT}/auth`);
dispatch({
type: 'auth/setUser',
payload: response.data
});
navigation.navigate('Home');
} catch (error) {
console.error(error.message);
}
};通过 dispatch(loadUser(navigation))，我们将 loadUser action creator 返回的函数 dispatch 出去，Redux Thunk middleware 会自动调用这个函数，并将 dispatch 作为参数传递给它。这样，loadUser action creator 中的异步操作和导航操作就能正确执行了。
注意事项
- 确保你的 Redux store 配置了 Redux Thunk middleware。
- 在 action creator 中，如果需要执行异步操作，并触发其他 action，一定要使用 dispatch 函数将它们 dispatch 出去。
- 将 navigation 对象传递给 action creator 时，需要确保 navigation 对象是有效的，并且已经初始化。通常，可以在组件中使用 useNavigation hook 获取 navigation 对象，并将其传递给 action creator。
总结
在 React Native 应用中使用 Redux 管理状态时，需要在 Redux action 中触发导航，关键在于理解 Redux Thunk 的工作方式，以及如何正确地 dispatch 异步 action creator。通过将 navigation 对象传递给 action creator，并在 action creator 中使用 dispatch 函数将异步 action creator dispatch 出去，可以确保导航操作能够成功执行。 遵循这些原则，可以避免常见的错误，并构建更加健壮和可维护的 React Native 应用。
