React - переменная не отображается на странице правильно

Question

У меня есть переменная attackHero, начальное значение которой - Ironman.Его правильно отображается на странице.При нажатии кнопки я изменяю это на Халка через отправку Redux.Но изменение не отражается на странице.Я что-то здесь упускаю?

Пожалуйста, смотрите код ниже.

import React, { Component } from 'react';
import { createStore } from 'redux';

class ReduxDemo extends Component {

    constructor(props) {
        super(props);
        this.initNukeAttack = this.initNukeAttack.bind(this);

        this.store = null;
    }

    initNukeAttack() {
        console.log("I am inside initNukeAttack");
        this.store.dispatch({type:"GREEN-ATTACK", hero: "Hulk"});
    }
    render() {
        let attackHero = "attack hero";

        // step 2 -> reducer => require state and action
        const reducer = function(state, action) {
            if(action.type === "ATTACK") {
                return action.hero;
            }
            if(action.type === "GREEN-ATTACK") {
                return action.hero;
            }
            return {p:"peace"};
        }

        //Step 1
        this.store = createStore(reducer, "PEACE");

        //step 3 -> subscribe
        this.store.subscribe(() => {
            //console.log("Store is now", store.getState());
            //console.log(store.getState());

            attackHero = this.store.getState();
        })

        //step 4 -> dispatch action
        this.store.dispatch({type:"ATTACK", hero: "Ironman"});
        //this.store.dispatch({type:"GREEN-ATTACK", hero: "Hulk"});
        return(
            <div>
                <div>{attackHero}</div>
                <button onClick={this.initNukeAttack}>Initiate Green Attack</button>
            </div>
        );
    }
}

export default ReduxDemo;

Отображаемый экран выглядит следующим образом.

Answer 1

Но изменение не отражается на странице

это потому, что React не перерисовывает страницу.

Для повторной визуализации вам необходимо использоватьstate и установите переменную состояния с помощью setState метода.

или

вам необходимо принудительно отобразить страницу как this.forceUpdate(); после установки переменной состояния

Answer 2

Привет, во-первых, я бы порекомендовал правильно следить за реакцией с редуксом с промежуточным ПО для создания действий. Есть много доступных ресурсов. В любом случае, вы отправляете в рендер действие, которое является неправильным. Во-вторых, для обновления переменной вам нужно setState, чтобы повторно обработать ваш компонент. Вот ваш рабочий код:

class ReduxDemo extends Component {
  constructor(props) {
    super(props);
    this.initNukeAttack = this.initNukeAttack.bind(this);

    this.store = null;
    this.state = {
      attackHero: "IronMan"
    };
  }

  initNukeAttack() {
    console.log("I am inside initNukeAttack");
    this.store.dispatch({ type: "GREEN-ATTACK", hero: "Hulk" });
  }
  render() {
    // step 2 -> reducer => require state and action
    const reducer = function(state = "ironman", action) {
      if (action.type === "ATTACK") {
        return action.hero;
      }
      if (action.type === "GREEN-ATTACK") {
        return action.hero;
      }
      return state;
    };

    //Step 1
    this.store = createStore(reducer, "PEACE");

    //step 3 -> subscribe
    this.store.subscribe(() => {
      //console.log("Store is now", store.getState())

      const attackHero = this.store.getState();
      this.setState({
        attackHero
      })
    });

    //step 4 -> dispatch action
    //this.store.dispatch({ type: "ATTACK", hero: "Ironman" });
    // this.store.dispatch({type:"GREEN-ATTACK", hero: "Hulk"});
    return (
      <div>
        <div>{this.state.attackHero}</div>
        <button onClick={this.initNukeAttack}>Initiate Green Attack</button>
      </div>
    );
  }
}