React/Redux - Dispatch wird nicht aktualisiert View

Question

Erste kleine Reaktion/Redox-Projekt, um sowohl reagieren und Redox zu lernen.

Das onClick-Ereignis auf dem Button-Element wird ausgelöst, da ich den Wert in der Konsole (in der Reduzierdatei) sehen kann. Die Ansicht wird jedoch nicht aktualisiert.

Ja, ich habe online geschaut, und ich habe einen ganzen Tag lang auf diesem Problem festgefahren.

Was mache ich falsch?

Vielen Dank im Voraus.

PanelContainer.js Datei:

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 Datei:

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 Datei:

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 Datei:

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

export default store; 

Datei

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

Ich glaube, der Grund, warum Sie kein Updates in Ihrer gerenderte Ansicht sehen ist, weil Sie falsch kartieren Ihren Zustand mit den Stützen Sie an die Komponente zu übergeben. Sie Bundesland-> Requisiten sollten Mapping-Funktion sein:

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

state.followerReducer das Ganze von Ihrem Minderer verwalteten Status-Objekt ist. Es ist klar, aus dieser Linie

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

und von Ihrer ursprünglichen Zustand Definition, dass Sie die Daten speichern, aktualisieren Sie in state.followerReducer.follower

Mit Ihrer mapStateToProps Funktion, die Sie haben, {this.props.follower.count} in der Render-Methode wird das gesamte Reduktions Objekt sein (das ist {follower: {...}}.