我可以在组件中使用redux中的createStore（）吗？

Posted 2021-05-05

问题：是否可以在组件中使用redux中的createStore（）？如果是这样，如何正确地做到这一点？

我试图通过将这个stopwatch example转换为基于组件的方法来理解react和redux。

最初的方法如下：

let container = Redux.createStore((model = { running: false, time: 0 }, action) => {
  const updates = {
    'START': (model) => Object.assign(model, {running: true}),
    'STOP': (model) => Object.assign(model, {running: false}),
    'TICK': (model) => Object.assign(model, {time: model.time + (model.running ? 1 : 0)})
  };
  return (updates[action.type] || (() => model))(model);
});

和

const render = () => {
  ReactDOM.render(view(container.getState()),
    document.getElementById('root')
  );
};

到目前为止我得到的是this，它没有显示计数器div。

请注意，我正在尝试理解react和redux背后的原因，从而避免故意使用react-redux。

答案

这在技术上是可行的，但这不是你应该怎么做的。

在React中，您希望render方法的输出仅依赖于组件的props和state。所以你想要做的是定义一个组件，它希望在它之外的东西提供道具，然后让Redux成为那个提供者。你可以阅读更多关于它here。您的示例还有另一个问题：Redux希望reducer（传递给createStore的方法）不会改变以前的状态。 Object.assign(state, ...)确实改变了对象，因此需要将其更改为Object.assign({}, state, ...)。更多关于那here。

我有一个working snippet给你，但我强烈建议遵循官方指南:)