Reactjs 重复使用每个相同组件的减速器_Reactjs_Redux_React Redux

Reactjs 重复使用每个相同组件的减速器

reactjs redux

Reactjs 重复使用每个相同组件的减速器,reactjs,redux,react-redux,Reactjs,Redux,React Redux,假设我已经编写了自己的reducer计数器，以及由connect（）创建的相应组件然后我创建一个存储来保存计数器的数据，并在内部呈现，如下所示： const store = createStore(counter); render( <Provider store={store}> <Counter /> </Provider>, document.getElementById('container') ); 这种方法可行，但与Red

假设我已经编写了自己的reducer

计数器

，以及由connect（）创建的相应组件

然后我创建一个

存储

来保存

计数器的数据

，并在

内部呈现

，如下所示：

const store = createStore(counter);

render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('container')
);

这种方法可行，但与Redux的“每个应用程序一个存储”原则相冲突

后来，我尝试了许多不同的方法来实现这一点，只使用一个

存储

，同时尽可能多地重用我创建的内容（目前，使用reducer

计数器

和component

）

我提出的最后一个（也是可行的）方法是编写一个新的reducer

multi-counters

和一个新的连接组件

multi-counters

，然后使用它：

// new reducer
const multiCounters = (state, action) => {
  ...
};

// new connected component
const Counters = ({...}) => {
  return (
    <div>
      <Counter {...} />
      <Counter {...} />
      ...
    </div>
  );
};
const MultiCounters = connect(...)(Counters);

// render
const store = createStore(multiCounters);

render(
  <Provider store={store}>
    <MultiCounters />
  </Provider>,
  document.getElementById('container')
);

//新减速器
常量多计数器=（状态、操作）=>{
...
};
//新连接组件
常量计数器=（{…}）=>{
返回(
...
);
};
常量多计数器=连接（…）（计数器）；
//渲染
const store=createStore（多计数器）；
渲染(
,
document.getElementById（'容器'）
);

这种方法可以工作并且满足“一个存储”原则，但是我必须编写另一组代码来包装我想要重用的组件。更不用说真正被重用的只是React组件

，在这种情况下，单个计数器的减速机

计数器

将变得无用

在ReactRedux中有没有更聪明的方法来重用组件（也可能是还原器？）

谢谢

您可以创建另一个包装容器，例如连接到redux store的

，并将计数器数据作为道具传递给子组件（您创建的

）

比如说,

const store = createStore(counter);
render(
  <Provider store={store}>
    <CountersPage />
  </Provider>,
  document.getElementById('container')
);

const store=createStore（计数器）；
渲染(
,
document.getElementById（'容器'）
);

包装器组件与

非常相似，但数据是通过道具传递的

class CountersPage extends React.Component {
  render() {
    return (
      <div>
        <Counter counter={this.props.counter} />
        <Counter counter={this.props.counter} />
      </div>
   );
  }
};
function mapStateToProps(state) {
  return { counter: state.counter }
}
export default connect(mapStateToProps)(CountersPage)

类计数器页扩展React.Component{
render（）{
返回(
);
}
};
函数MapStateTops（状态）{
返回{counter:state.counter}
}
导出默认连接（MapStateTops）（第页）

请注意，

不会连接到redux存储，而是成为无状态/表示组件<代码>是它的有状态父组件（容器）

查看Redux的创建者在本文中的差异：

您可以创建另一个包装容器，例如连接到Redux存储的