Базовый пример счетчика Redux не увеличивает счетчик

Question

Я создаю самый простой пример применения Redux с React для отработки того, чему я учился последние два дня, простое приложение для получения состояния счетчика из хранилища и его увеличения, вот и все.

Кодвсе делает правильно, и он отправляет действие (консоль регистрирует тип и значение действия также внутри редуктора), но не увеличивает счетчик.

Если у вас есть опыт работы с Redux, вы можете проверитьредуктор напрямую, я думаю, что проблема есть.

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/> добавляются два дополнительных реквизита: *Значение 1012 * (берется непосредственно из состояния хранилища) и функция increment() (которая отправляет действие вашему редуктору).Обратите внимание, что метод connect() возвращает новую версию вашего компонента <ConnectedAdd /> (которая используется на следующем шаге).

Далее, вы захотите использовать <Provider /> для подключения вашего магазина кВаше приложение выглядит следующим образом:

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

Наконец, небольшой рефакторинг для render() компонента <App/> компонента завершает этот процесс:

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>
    );
  }
}

Реакт-избыточный "материал"сначала может быть немного, чтобы поразмышлять, но как только вы немного поработали с ним, это начинает иметь больше смысла - придерживайтесь этого: -)

Для полного рабочего примерапожалуйста, смотрите этот код и коробку