Задать вопрос
Tash1moto
@Tash1moto

Почему не обновляется props?

почему не перерендериваеться элемент h3 в компоненте App ?
В консоли значение меняется а в компоненте остается initialState.

index.js
import "bootstrap/scss/bootstrap.scss"
import React, {Component} from "react"
import {render} from "react-dom"
import {createStore} from "redux"
import {Provider} from "react-redux"
import App from "./App"

// reducer
let initialState = {counter:0};
let counterReducer = (state=initialState,action)=>{
    let newstate=state
    switch(action.type){
        case "INC":
            newstate.counter+=action.payload
            return newstate
        case "DEC":
            newstate.counter+=action.payload
            return newstate
        default:
            return newstate
    }
}


let store = createStore(counterReducer)

render(
    <Provider store={store}>
        <div className="container">
            <App/>
        </div>
    </Provider>,
    document.getElementById("root")
)


App.js
import React, {Component} from "react"
import {render} from "react-dom"
import {createStore} from "redux"
import { connect } from "react-redux";



class App extends Component{
    constructor(props){
        super(props)
    }

    incrementEvent(){
        console.log(this.props.pState.counter)
        this.props.inc()
    }


    render(){
        return(
            <div>
                <h3>counter:{this.props.pState.counter}</h3>
                <button className="btn btn-default" onClick={()=>this.incrementEvent()}> button </button>
            </div>
        )
    }
}

let mapStateToProps= state=>({pState:state})
let mapDispatchToProps = dispatch=>({
    inc: ()=>{
        dispatch({type:"INC",payload:10})
    }
})
const DefaultApp = connect(mapStateToProps,mapDispatchToProps)(App)
export default DefaultApp
  • Вопрос задан
  • 264 просмотра
Подписаться 1 Простой Комментировать
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Мутируете старый объект состояния, а надо возвращать новый.
Исправить можно так:
let counterReducer = (state=initialState, action) => {
    let newstate = { ...state };

    switch(action.type){
        case "INC":
            newstate.counter+=action.payload
            return newstate
        case "DEC":
            newstate.counter+=action.payload
            return newstate
        default:
            return newstate
    }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы