设置和镜像 2 个 React.js 组件的最简单方法是什么答案

【问题标题】：What's the easiest way to setup and mirror 2 React.js components设置和镜像 2 个 React.js 组件的最简单方法是什么
【发布时间】：2019-01-17 18:09:48
【问题描述】：

我想创建两个组件，每个组件都反映一个页面、一个视图，但具有相同的状态和道具。让我更深入地了解这一点：

我想要实现的是有两个页面，每个页面由一个 React 组件组成，两个组件具有相同的状态和渲染。如果可以的话，就像一面镜子。该页面应将输入输入到字段中并应呈现该输入的值（我设法这样做），但是当我更改值时，更改也应反映在其他页面上。另一个（第二个）页面在反映该值的同时，也可以操作相同的输入字段。

基本上是一个包含来自 2 个不同页面的 2 个控制器控制相同值的字段。我已经创建了组件并且我也在使用 Redux。我可以成功更改初始状态（值）并通过 store 获取新状态，但更改不会反映在第二个组件中。我怎么做？我对 React 和 Redux 都很陌生，我知道我不应该在还是 React 菜鸟的时候潜入 Redux。

【问题讨论】：

当你谈到两个“页面”时，你的意思是像浏览器标签还是什么？
是的。 config.html 和 secondconfig.html。两者同时在两个选项卡中打开，正确。
您可能会考虑使用 Redux 操作，在每次编辑时保存在 localStorage 中并轮询更改。有趣的挑战:)
我实际上完全忘记了这一点！我做到了，它就像一个魅力。谢谢！ :)

标签： reactjs components

【解决方案1】：

已解决：

我在我的商店中创建了一个持久化状态：

const persistedState = localStorage.getItem('reduxState') ? JSON.parse(localStorage.getItem('reduxState')) : {}

并在创建我的商店时将persistedState 作为参数传递：

const store = createStore(reducer, persistedState);

并在之后立即订阅：

store.subscribe(()=>{
  localStorage.setItem('reduxState', JSON.stringify(store.getState()))
})

工作就像一个魅力。

【讨论】：