Reactjs React/Redux-调度不更新视图

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

button元素上的onClick事件将激发，因为我可以在控制台（reducer文件）中看到该值。但是，视图没有更新

是的，我在网上查过了，一整天都在关注这个问题

我做错了什么

提前谢谢

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);

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
);

从“React”导入React；
从“react dom”导入react dom；
从“react redux”导入{Provider}；
从“/panel/PanelContainer”导入PanelContainer；
从“/shared/store”导入存储；
让app=document.getElementById（“app”）；
ReactDom.render(
,
应用程序
);

我认为，在渲染视图中看不到任何更新的原因是，您使用传递给组件的道具错误地映射了状态。 您的状态->道具映射函数应为：

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

state.followerReducer

是由reducer管理的整个state对象。 从这条线看很清楚

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

从初始状态定义开始，您将更新的数据存储在

state.followerReducer.follower

---

使用您拥有的

mapStateToProps

函数，

{this.props.follower.count}

在渲染方法中将是整个reducer对象（即

{follower:{…}}

另一种情况是您的视图没有通过Redux更新，您需要：

试试这个，我就救了我的命。

（深度解决方案）：我建议读这篇文章：

（快速解决方案）：我建议使用以下代码来解决问题：

return {
  follower: Object.assign({},follower: state.followerReducer.follower}
};

---

它在redux文档中明确声明不改变状态。@azium wait…我如何改变状态？我正在做状态={…状态，follower://code}…据我所知，这不是变异状态。你应该提供更多的代码-你正确初始化了提供程序吗？@Adidi添加了更多的代码。这是变异状态…阅读我发布的链接…如果你接受参数

state

，然后重新分配它，这就是变异的定义。比如..

var x=10

然后稍后

x=20

这就是变异，就是它！令人尴尬的是…它像一个酸痛的拇指一样粘住了，我没有抓住它。非常感谢！没问题，当我使用getDerivedStateFromProps从道具映射状态时，很容易犯错误，道具改变了，但状态没有改变