Question

我正在创建使用Redux和React来实践我最近两天所学到的最基本的示例，这是一个简单的应用程序，它可以从存储中获取计数器状态并将其递增。

该代码正确执行了所有操作，并且确实调度了一个动作（它还在console内同时记录了动作类型和值），但没有递增计数器。

如果您有使用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);

Answer 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“ stuff”可能会有点儿让人头疼，但是一旦使用了它，它就会变得更有意义-坚持下去：-）

对于full working example please see this codesandbox

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

1 个答案: