每个组件重用减速器答案

【问题标题】：Reuse reducers per same component每个组件重用减速器
【发布时间】：2016-05-18 11:06:55
【问题描述】：

假设我已经编写了自己的reducer counter 和connect() 创建的相应组件<Counter />。

然后我创建一个store 来保存counter 的数据并在<Provider /> 中渲染<Counter />，如下所示：

const store = createStore(counter);

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

到目前为止，一切正常。

但是当我认为我可以轻松地重用我的 reducer counter 和组件 <Counter /> 并尝试在一页中渲染多个计数器时，我发现自己很挣扎......

我想到的第一个想法是创建多个stores 和<Provider />s 来完成此操作，例如：

const store1 = createStore(counter);
const store2 = createStore(counter);

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

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

后来我尝试了许多不同的方法来实现这一点，只用了一个store，同时尽可能多地重用我创建的东西（目前，reducer counter 和组件<Counter />）。

我得出的最后一个（也是可行的）方法是写一个新的reducermultiCounters和一个新的连接组件MultiCounters，然后使用它：

// 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')
);

这种方法有效，符合“一个商店”的原则，但我必须再写一堆代码来包装我想要重用的组件。更不用说真正被重用的只是 React 组件 <Counter />，单个计数器的 reducer counter 在这种情况下变得毫无用处......

在 ReactRedux 中是否有更聪明的方法来重用组件（也许还有 reducer？）？

谢谢！

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

您可以创建另一个包装容器，例如 <CountersPage />，它连接到 redux 存储并将计数器数据作为 Props 传递给子组件（您创建的 <Counter />）。

例如，

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

并且包装器组件与您的<MultiCounters /> 非常相似，但数据是通过道具传递的。

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)

请注意，<Counter /> 不会连接到 redux 存储并成为无状态/展示组件。 <CountersPage /> 是它的有状态父组件（Container）。

查看本文作者Redux的不同之处：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.uvvzhk1eu

【讨论】：