Question

我正在开发一个Web应用程序，我想使用URL查询来运行搜索查询在执行搜索时，应根据url查询参数将新请求发送到服务器以获取新数据使用Redux和dispatch，我想调用onChange函数根据查询从服务器获取新数据（即网址更改）。

我正在考虑使用dispatch事件并调用<IndexRoute component={Catalog} onChange={(prevState, nextState, replace) => {dispatch(fetchProducts(nextState.location.search))}}/>函数，如下所示：

store.dispatch

但由于我的路线不是React组件，我无法访问调度功能我可以导入我的商店并使用{{1}}，但我不推荐这样做你建议我做什么？

Answer 1

为了解决这类问题，我们总是在类似于此的函数中声明或路由：

function createRoutes(store) {
  return {
    component: App,
    childRoutes: [
      // Here are defined the other routes.
      // They can be defined using plain objects:
      {path: "profile", component: Profile},
      // Or generated through a function call:
      ...require("./some/module")(store),
    ]
  }
}

执行此操作时，使用存储分派操作或在React Router生命周期挂钩中进行计算非常简单。

function createRoutes(store) {
  return {
    component: Settings,
    onEnter: (nextState, replace, callback) => {
      const state = store.getState()
      if (!state.user.logged) {
        dispatch(createNotification("You must be logged to perform this"))
        replace("/login")
      }

      callback()
    }
  }
}

如何在react-router路由中调用onChange的调度？

1 个答案: