react-redux 更新 state 之后为什么视图没有更新呢？

Question

新手请问一下，react-redux connect 关联起 component & store, 通过 mapDispatchToProps dispatch 改变 state 之后，为什么视图没有跟着改变呢？

import { Component } from 'react';
import { connect } from 'react-redux';

class Page1 extends Component {
    render() {
        const { state, onAddClick } = this.props;
        return (
            <div>
                <h2>{ state.no }</h2>
                <h2 onClick={ onAddClick }>+</h2>
            </div>
        );
    }
}

function mapStateToProps (state) {
    return {
        state,
    }
}

function mapDispatchToProps (dispatch) {
    return {
        onAddClick () {
            dispatch({ type: 'ADD' })
        }
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(Page1);

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers  from './reducers';

const store = createStore(reducers);

store.subscribe(() => {
    console.log(store.getState());
})

import page from './page';

ReactDOM.render(
    <Provider store={ store }>
        <Router>
            <div className="app">
                <Route exact path="/" component={ page }/>
            </div>
        </Router>
    </Provider>,
    document.getElementById('app')
);

从 subscribe 是看到 state 的值已经是变化了的

Answer 1

注意reducer 的书写，传来的state,注意不要对state 直接修改state，state是对象引用类型(指向堆）
let proData = (state = defaultState, action={}) => {

let stateCopy = {...state};
switch (action.type) {
    case 'initTable':
    stateCopy.display = action.data;
    stateCopy.loading = false;
        // state[`productType`].item = action.data;
        break;
    case 'refresh':
    stateCopy[`productType`].display = action.data;
        break;
    case 'loading':
    stateCopy.loading = action.data;
        break;
    default:
        break;
}
return stateCopy;

}
export default proData;

Answer 2

你的reducer呢？

Answer 3

打印一下状态的值就知道了 你这里贴出来的代码只是发送了action 但是接收action的函数 以及相关更新state的reducer都没有~ state是绝对没有更新的