reactjs - React/Redux - 调度不更新 View

Question

第一个学习 React 和 Redux 的小型 React/Redux 项目。

按钮元素上的 onClick 事件触发，因为我可以在控制台(在 reducer 文件中)中看到该值。但是， View 没有更新。

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

我做错了什么？

提前致谢。

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

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

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

state.followerReducer 是您的 reducer 管理的整个状态对象。从这一行就可以清楚地看出

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

并且根据您的初始状态定义，您将更新的数据存储在 state.followerReducer.follower

使用您的 mapStateToProps 函数，渲染方法中的 {this.props.follower.count} 将是整个 reducer 对象(即 {关注者:{...}}。