javascript - 在 React 应用程序中重定向用户的最佳实践是什么？

Question

我看到了更多与在 React 应用程序中重定向用户相关的案例，每个案例都只是解决方案的不同方法。在某些情况下，重定向发生在像这样的操作中`

export const someAction = (values, history) => async dispatch => {
    const res = await someAsyncOperation(props);
    history.push('/home');
    dispatch(someAction);
}

在这个例子中，history 对象(形成 react-router)被传递到 react 组件中。对我来说，这种做法是 Not Acceptable 。还有一个来自 react-router 的特殊重定向。

然后我已经搜索了很多文章，但找不到任何东西。那么在您看来，重定向的最佳实践是什么以及在何处处理此类流程？

Answer 1

在 React 中，您通常在组件的 componentDidUpdate 中实现重定向。

在异步操作的情况下，您将检查存储在 Redux 存储中的标志，通常是 bool 值，如 isFetching、isCreating、isUpdating 等...，将被操作修改。

简单的例子:

class EditUser extends Component {
  compondentDidUpdate(prevProps) {
    if (prevProps.isUpdating && !this.props.isUpdating) {
      // ↑ this means that the async call is done.

      history.push('/users')
    }
  }

  updateUser() {
    const modifiedUser = // ...

    this.props.updateUser(modifiedUser)
    // ↑ will change state.users.isUpdating from false to true during the async call,
    // then from true to false once the async call is done.
  }

  render() { 
    // ...
    <button onClick={this.updateUser}>Update</button>
    // ...
  }
}

const mapStateToProps = (state, props) => ({
  userToEdit: state.users.items.find(user => user.id === props.userId)
  isUpdating: state.users.isUpdating,
})

const mapActionsToProps = {
  updateUser: usersActions.updateUser,
}

export default connect(mapStateToProps, mapActionsToProps)(EditUser)

下一步通常是在您的 Redux 存储中添加另一个标志以跟踪异步调用是否成功(例如 state.users.APIError，您可以在其中保留由返回的错误API)。然后只有在没有错误的情况下才能实现重定向。