javascript - 在成功的异步 redux 操作中转换到另一条路线

Question

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

挂接到 redux 的
• container并处理操作、商店订阅等
• list 显示我的项目列表
• new 用于向列表中添加新项目的表单

我有一些 react-router路线如下:

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

以便显示 list 或 form 但不会同时显示两者。

我想做的是在成功添加新项目后让应用程序重新路由回列表。

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

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

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

Answer 1

如果您不想使用更完整的解决方案，例如 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 Router 兼容。