Component not rerender after action being dispatched and reduced

Question

i want to make a counter Component when i learning in react and redux now. so i want to change the eval input and then i will click the resolve input,and the end show the resolve to component2.but when i clicked,the resolve was changed in reducer and actions (i was consoled the resolve) , but had not change in component2,why?my English is not good,thanks...

this is my full code:

actions.js

export function DO_COUNT(resolve) {
  return {
    type: 'DO_COUNT',
    payload: resolve
  }
}

reducer.js

import actions from '../actions'    
export default (state = { resolve: 0 }, actions) => {
      switch (actions.type) {
        case 'DO_COUNT':
          console.log({
            ...state,
            resolve: actions.payload
          })
          return {
            ...state,
            resolve: actions.payload
          }
          break
        default:
          return state
      }
    }

store.js

import { createStore } from 'redux'
import reducers from '../reducers'
import { composeWithDevTools } from 'redux-devtools-extension'

const store = createStore(reducers, composeWithDevTools())

export default store

my component1:Counter.js

import React, { Component } from 'react'
import styleObj from './style.less'
import store from '../../store'
import { DO_COUNT, CHANGE_EVAL } from '../../actions'

export default class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = {
      num1: 0,
      num2: 0,
      myEval: '+'
    }
  }

  changeEval = e => {
    this.setState({
      myEval: e.target.value
    })
  }

  changeNum1 = e => {
    // let _target = e.target.dataset.target
    let value = e.target.value
    this.setState(
      {
        num1: value
      },
      () => {
        console.log(this.state)
      }
    )
  }
  changeNum2 = e => {
    // let _target = e.target.dataset.target
    let value = e.target.value
    this.setState(
      {
        num2: value
      },
      () => {
        console.log(this.state)
      }
    )
  }

  doCount = () => {
    let resolve = eval(
      [this.state.num1, this.state.num2].join(this.state.myEval)
    )
    store.dispatch(DO_COUNT(resolve))
  }

  render() {
    return (
      <div className={styleObj.counterBox}>
        <input type="number" onInput={this.changeNum1} data-target="num1" />
        <select onChange={this.changeEval}>
          <option defaultValue="+">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
        </select>
        <input type="number" onInput={this.changeNum2} data-target="num2" />
        <input type="button" value="=" onClick={this.doCount} />
      </div>
    )
  }
}

my component2:Container.js

import React, { Component } from 'react'
import styleObj from './style.less'
import store from '../../store'

export default class Container extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return <h1 className={styleObj.content}>{store.getState().resolve}</h1>
  }
}

and image:

Check this https://stackoverflow.com/questions/49892456/redux-getstate-doesnt-return-the-updated-state/49892910#49892910 — Shubham Khatri, Dec 21 '18 at 06:44

score 0 · Accepted Answer · answered Dec 21 '18 at 09:42

You should be using react-redux.

The problem is your Container component is not being notified when the store's state changes. You can do this manually by hooking into lifecycle methods and setting state, but this is what react-redux already does (in a more optimized way).

Component not rerender after action being dispatched and reduced

1 Answers1