React/Redux - 調度不更新視圖

第一個小反應/ redux項目，學習反應和redux。React/Redux - 調度不更新視圖

按鈕元素上的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);

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

來源

2016-10-09 FNMT8L9IN82

它在redux文檔中明確指出不要改變狀態。http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments – azium

@azium wait ...我如何變異狀態？我在做state = {... state，follower：// code} ...就我所知，這不是變異狀態。 – FNMT8L9IN82

您應該提供更多代碼 - 您是否正確初始化提供程序？ – Adidi

我相信你沒有看到你的渲染視圖的任何更新的原因是因爲你錯誤地與您傳遞給該組件的道具映射你的狀態。你明─>道具映射功能應該是：

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

state.followerReducer是你的減速管理的全狀態對象。這是從該行

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

，並從您存儲數據的初始狀態定義清楚你在state.followerReducer.follower

更新與您mapStateToProps功能，您必須在渲染方法{this.props.follower.count}將是整個減速對象（它是{follower: {...}}。

來源

2016-10-09 22:02:02

就是這樣！尷尬......它像拇指一樣粘着，我沒有抓住它。非常感謝你！ – FNMT8L9IN82

沒問題，可能是一個容易犯的錯誤 –

React/Redux - 調度不更新視圖

回答

相關問題