在Redux中存储React路由

我正在使用react-router v4来生成从异步API中加载的动态路由。从API检索到的数据通过其将创建阵营路由函数通过，类似于：在Redux中存储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 
    } 
});

一旦路由被加载，它们被使用动作减速器照常加入到Redux的存储。这在redux商店支持功能时效果很好。

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

来源

2017-10-20 Kevin Farrugia

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

你或许可以在以后使用它们像这样：

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] } 
    /> 
); 
});

来源

2017-10-20 14:25:31

我设法通过在存储中存储组件名称然后将组件名称传递给返回组件的函数来实现此目的。我需要这个组件，以便在创建react-router组件时引用它。来自 “容器/家” 常量getRouteComponent =名=> { 开关（名称）{ 情况下 “主页” ''' 导入主页：返回首页; 默认值： return undefined; } }; ''' –

如果你能够更新你的例子，我可以把它标记为正确的。我创建'使用反应-router'路线： {routes.map（路线=> { 回报（ <路线关键= {} route.path确切路径 = {route.path} 部件= {getRouteComponent（route.component）} /> ）; }}} –

一个阵营组件由组件的状态（由的state和props）以及基于状态修改的一些行为（如函数和html标记）。一旦创建了组件，组件的行为将不会改变;只有组件的状态会改变。

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

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

希望这会有所帮助！

来源

2017-10-20 14:27:26 palsrealm

在Redux中存储React路由

回答

相关问题