Reactjs 在成功的异步 redux 操作上转换到另一条路由

发布于10月03日

我有一组非常简单的组件:

container连接到redux并处理操作、存储订阅等
list显示我的项目列表
new这是一个向列表中添加新项目的表单

我有大约react-router条路由如下:

<Route name='products' path='products' handler={ProductsContainer}>
  <Route name='productNew' path='new' handler={ProductNew} />
  <DefaultRoute handler={ProductsList} />
</Route>

因此，list或form都会显示，但不会同时显示.

我想做的是，一旦成功添加了一个新项目，应用程序就会重新路由回列表.

到目前为止，我的解决方案是在async dispatch之后有一个.then():

dispatch(actions.addProduct(product)
  .then(this.transitionTo('products'))
)

这是正确的方法吗？还是我应该以某种方式启动另一个操作来触发路由更改？

推荐答案

如果不想使用Redux Router这样更完整的解决方案，可以使用Redux History Transitions，它可以让您编写如下代码:

export function login() {
  return {
    type: LOGGED_IN,
    payload: {
      userId: 123
    }
    meta: {
      transition: (state, action) => ({
        path: `/logged-in/${action.payload.userId}`,
        query: {
          some: 'queryParam'
        },
        state: {
          some: 'state'
        }
      })
    }
  };
}

这类似于what you suggested，但稍微复杂一点.它仍然在引擎盖下使用相同的history库，因此与React路由兼容.