Redux 计数器基本示例不增加计数答案

【问题标题】：Redux counter basic example does not increment countRedux 计数器基本示例不增加计数
【发布时间】：2018-10-23 19:32:23
【问题描述】：

我正在创建一个应用 Redux 和 React 的最基本示例来实践我最近两天学习的内容，简单的应用程序从存储中获取计数器状态并增加它，就是这样。

代码做的一切都是正确的，它确实调度了一个动作（它也控制台记录动作类型和值也在减速器内部），但它不增加计数器。

如果你对Redux有经验可以直接检查reducer，我认为问题就在那里。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import {createStore} from "redux";

var initialState = {
  count: 5
};

function reducer(state = initialState, action) {
  console.log(action)
  switch (action.type) {
    case "ADD":
      return {
        count: state.count + action.value
      };
    default:
      return state;
  }
}

var store = createStore(reducer, initialState);

class App extends React.Component {
  increment = () => {
    store.dispatch({type: "ADD", value: 1});
  };

  render() {
    return (
      <div className="App">
        <h1>Hello Counter Redux app</h1>
        <button onClick={this.increment}> click to increment number</button>
        <br />
        <br />
        <b> {store.getState().count} </b>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【问题讨论】：

您的 App 组件中的计数器不会增加（在 redux 商店中它确实会增加），因为 App 组件没有与 redux 商店连接，这基本上意味着它没有订阅商店更新。您需要使用 react-redux 包中的连接功能，并将您的 App 组件包装在同一包中的 Provider 组件中
您的商店实际上会更新，但您的组件不会更新，因为它不是商店的 connected，请检查此沙盒控制台以查看商店，每次您发送我已添加代码的操作时每次更新后第 25-27 行到console.log 商店codesandbox
我添加了 provider 和 store.subscribe()，在这个代码框 codesandbox.io/s/xj8p9o9x94 它在控制台日志中显示了正确的计数，但它不会在应用程序内更新

标签： redux

【解决方案1】：

我建议对您的代码进行一些修改 - 首先，考虑使用 react-redux 将您的商店绑定到您的 <App/> 组件。

采用基于react-redux 的方法，您需要使用此包提供的connect() 方法，将您的<App/> 组件连接到您的操作并存储：

const ConnectedApp = connect(
  state => {
    return {
      count: state.count
    };
  },
  dispatch => {
    return {
      increment: () => dispatch({ type: "ADD", value: 1 })
    };
  }
)(App);

这样做会为您的 <App/> 组件公开两个额外的道具：count 值（直接取自存储状态）和 increment() 函数（将操作分派给您的减速器）。请注意，connect() 方法会返回组件的新版本 <ConnectedAdd />（在下一步中使用）。

接下来，您需要使用<Provider /> 通过以下方式将您的商店挂载到您的应用：

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <ConnectedApp />
  </Provider>,
  rootElement
);

最后，对您的<App/> 组件的render() 方法进行一点重构即可完成此过程：

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>Hello Counter Redux app</h1>
        <button onClick={this.props.increment}>
          {" "}
          click to increment number
        </button>
        <br />
        <br />
        <b> {this.props.count} </b>
      </div>
    );
  }
}

react redux 的“东西”一开始可能会让你有点摸不着头脑，但一旦你用了一点，它就会开始变得更有意义 - 坚持下去:-)

对于full working example please see this codesandbox

【讨论】：