反应-变量未正确显示在页面中

Question

I have a variable attackHero whose initial value is Ironman. Its showing correctly on the page. On button click I am changing it to Hulk via Redux dispatch. But the change is not reflecting in the page. Am I missing something here?

Please see the code below.

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;

The rendered screen look like this.

Answer 1

Hi first i would recommend to properly follow react with redux with middleware for action cretors. There are abundant resources available. Anyways you were dispatching an action in render which is wrong. Second, for updating the the variable you need to setState to re-render your component. Here is your working code :

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

Answer 2

But the change is not reflecting in the page

this is because React is not re-rendering the page.

To re-render you need to use state and set the state variable via setState method.

or

you need to force render the page like this.forceUpdate(); after you set the state variable