Question

说我已经编写了自己的reducer counter和connect（）创建的相应组件<Counter />。

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

const store = createStore(counter);

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

到现在为止，一切顺利。

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

我想到的第一个想法是创建多个store和<Provider />来完成此任务，例如：

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

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

这种方法有效，但与每个应用程序的一个商店冲突＆＃34; Redux的原则。

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

我出来的最终（也是可行的）方法是编写一个新的reducer multiCounters和一个新的连接组件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')
);

这种方法可以满足＆＃34;一个商店＆＃34;原则，但我必须编写另一堆代码来包装我想要重用的组件。更不用说真正被重用的是只有React组件<Counter />，单个计数器的reducer counter在这种情况下变得无用......

在ReactRedux中是否有更智能的方法来重用组件（也可能是减速器？）

谢谢！

Answer 1

您可以创建另一个包装器Container，例如<CountersPage />，它连接到redux store并将计数器数据作为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 store并成为无状态/表示组件。 <CountersPage />是其有状态的父组件（Container）。

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

每个相同组件重复使用Reducer

1 个答案: