Question

我使用react-router v4生成从异步API加载的动态路由。从API检索的数据通过一个函数传递，该函数将创建React路由，类似于：

import Home from "containers/home"
import FeaturePage from "containers/featurePage"

response.map((item) => {
  if (item.value.toLowerCase() === "home") {
    return {
      path: item.path,
      component: Home,
      exact: item.isExact
    }
  } else if (item.value.toLowerCase() === "featurePage") {
    return {
      path: item.path,
      component: FeaturePage,
      exact: item.isExact
    }
  } else {
      // ...etc
  }
});

加载路径后，会像往常一样使用action-reducer将它们添加到Redux存储中。这适用于redux存储支持函数。

但是将函数存储在Redux存储区doesn't seem to be the best way forward中。什么是更好的实施？我需要存储需要渲染的组件，这是不可序列化的。

Answer 1

只需将组件名称存储为字符串？（不知道为什么你想把它们添加到商店）

您可以稍后使用它们：

import Home from "containers/home"
import FeaturePage from "containers/featurePage"

// Assume the routes have been added to the redux store
const Routes = {
  Home,
  FeaturePage
};

response.map(({ component, path, exact }) => {
  return (
    <Route
      key={ path }
      exact={ exact }
      path={ path }
      component={ Routes[component] }
    />
  );
});

Answer 2

React组件由组件的状态（由state和props组成）和一些基于状态修改的行为（如函数和html标记）组成。一旦创建了组件，组件的行为就不会改变;只有组件的状态才会改变。

我认为保存组件的状态足以在以后重新创建组件，而您不需要在Redux中保存组件;而是在Redux中保存组件的状态。

关于在Redux中保存路由，同样适用;你应该在Redux商店中保存Route的状态而不是路由本身。您可以拥有一个可以获取此状态对象的函数（包含路径，isExact，组件名称等）并将其转换为真实组件。

希望这有帮助！

在Redux中存储React路由

2 个答案: