在 redux 动作中导航本机反应

Question

我有一个注册表单，提交后我想导航到其他屏幕，只有当请求在操作文件中而不是在组件本身中成功时。

我将

navigation

作为参数从我的组件发送到函数，但导航没有发生。

关于这个问题有什么建议吗？

// Action.js
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)
  } 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)
  }
}

填写表单后在 component.js 中

dispatch(registerUser(formData, navigation))

Answer 1

loadUser

似乎是另一个异步动作创建者。

loadUser

是一个函数，它接受一个

navigation

参数并返回另一个函数，该函数也需要被调用以便执行该函数体并实现导航操作。

registerUser

动作调用

loadUser(navigation)

但永远不会调用返回的函数。

换句话说，

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);
  }
};

永远不会调用此函数。

你应该发送这个

loadUser

动作，这样 thunk/异步中间件就可以调用函数并再次传递

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);
  }
};

Answer 2

您在成功注册后从 registerUser 操作调用 loadUser 函数。但是，loadUser 函数是异步的，这意味着它不会立即返回值。因此，loadUser之后的导航调用不会等到loadUser函数完成后再导航。

为了确保导航仅在 loadUser 成功完成后发生，您可以修改 registerUser 操作以返回在 loadUser 完成时解析的承诺。以下是修改 registerUser 操作的方法：

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' })

    await dispatch(loadUser(navigation)) // Wait for loadUser to complete

  } catch (error) {
    console.error(error.message)
  }
}

通过等待对 loadUser 的调度调用，导航只会在 loadUser 成功完成后发生。另外，确保从 loadUser 函数返回 loadUser 调用，以便它可以在 registerUser 操作中等待。

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')

    return true // Return a value to indicate success

  } catch (error) {
    console.error(error.message)

    return false // Return a value to indicate failure
  }
}

通过这些更改，registerUser 操作现在应该返回一个在 loadUser 函数完成时解析的承诺，并且导航应该只在 loadUser 函数成功完成后发生。