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

Question

[Tash1moto]

почему не перерендериваеться элемент 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

Answer 1

[Антон Спирин]

Мутируете старый объект состояния, а надо возвращать новый.
Исправить можно так:

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

Comments

[Tash1moto]

Точно.
Только работает вот так
let newstate = Object.assign({},state)

в случае со spread оператором почему то ошибка


хотя в webpack.config.js

{
                test: /\.js$/,
                loader: "babel-loader",
                options: {
                    presets: ['react-es2015']
                }
            },

[Tash1moto]

Разобрался
Нужно было установить babel-plugin-transform-object-rest-spread
добавить в .babelrc
"plugins": ["transform-object-rest-spread"]

[Антон Спирин]

Tash1moto, чтобы использовать экспериментальные операторы, вам надо поставить stage-0:

{
        test: /\.js$/,
          {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'stage-0', 'react']
          }
        }]
      },

npm install -S babel-preset-stage-0

stage-0 сейчас стандарт в react разработке

[Антон Спирин]

Tash1moto, да можно и так, но лучше stage-0