React/Redux - 调度不更新视图

Question

第一个同时学习 react 和 redux 的小型 react/redux 项目。

按钮元素上的 onClick 事件触发，因为我可以在控制台中看到值（在减速器文件中）。但是，视图没有更新。

是的，我在网上看了一下，在这个问题上纠结了一整天。

我究竟做错了什么？

提前致谢。

PanelContainer.js 文件：

    class PanelContainer extends React.Component {

        constructor(){
          super();
          this.state = {
            color: new Color()
          }
        }

       render(){
          return (
           <div class="container">
             <Row>
               <Cell cols={`col-sm-12 col-md-3 col-lg-3`}>
                 <Panel>
                   <PanelBody color={this.state.color.generateColor(new Gray())}>
                      <Title title={this.props.follower.count} />
                      <p>{this.props.follower.description}</p>
                      <p><button class="btn btn-primary" onClick={() => this.props.getFollower()}>Update</button></p>
                   </PanelBody>
                </Panel>
              </Cell>
            </Row>
         </div>
        );
      }
    }

    const mapStateToProps = (state) => {
       return {
         follower: state.followerReducer
       };
    };

    const mapDispatchToProps = (dispatch) => {
      return {
        getFollower: () => {
          dispatch(getFollower());
        },
        changeFollower: () => {
          dispatch(changeFollower());
        }
      }
    }

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

FolloweReducer.js 文件：

export default (state = { follower: { count: 0, description: "Default description" } }, action) => {
  switch(action.type){
    case "GET_FOLLOWER":
      state = { ...state, follower: action.payload };
      console.log("GET FOLLOWER", state);
      break;
    case "CHANGE_FOLLOWER":
      state = { ...state, follower: action.payload };
      console.log("CHANGE FOLLOWER", state);
      break;
    default:
      break;
  }
  return state;
};

FollowerAction.js 文件：

export function getFollower() {
  return {
    type: "GET_FOLLOWER",
    payload: {
      count: 20,
      description: "New followers added this month"
    }
  }
}

export function changeFollower(){
  return {
    type: "CHANGE_FOLLOWER",
    payload: {
      count: 50,
      description: "Changed Followers!!!"
    }
  }
}

Store.js 文件：

const store = createStore(combineReducers({
  followerReducer: followerReducer
}));

export default store;

App.js 文件：

import React from "react";
import ReactDom from "react-dom";
import {Provider} from "react-redux";

import PanelContainer from "./panel/PanelContainer";
import store from "./shared/Store";

let app = document.getElementById("app");
ReactDom.render(
  <Provider store={store}>
    <PanelContainer />
  </Provider>,
  app
);

Answer 1

我相信您在渲染视图中看不到任何更新的原因是因为您错误地将状态映射到传递给组件的道具。你 state->props 映射函数应该是：

const mapStateToProps = (state) => {
   return {
     follower: state.followerReducer.follower
   };
};

state.followerReducer是由您的减速器管理的整个状态对象。从这一行可以看出

state = { ...state, follower: action.payload };

并从您存储更新数据的初始状态定义 state.followerReducer.follower

使用您的mapStateToProps函数，{this.props.follower.count}在 render 方法中将是整个减速器对象（即{follower: {...}}.