REDUX: Warum liefert der Store keine Daten an meine Komponente?

Question

Neuling hier versuchen, einige Redux zu lernen. ZIEL: Um eine Schaltfläche zum Klicken und Anmelden/Abmelden zu erhalten, aktualisieren Sie den Store als True/False-Status auf jeden Fall.

const store = createStore(myReducer) Erstellt mein Geschäft, vorbei in meinem Reducer.

Dies ist ein Standardzustand von ausgeloggt. Und kehrt das Gegenteil zurück, wenn die Schaltfläche geklickt wird.

Ich weiß, dass diese Aktion durch Debugging funktioniert.

function myReducer(state = { isLoggedIn: false }, action) { 
    switch (action.type) { 
    case 'TOGGLE': 
    return { 
     isLoggedIn: !state.isLoggedIn 
    } 
    default: 
    return state 
    } 
} 

Das Problem beginnt hier - wenn ich versuchen die store.getState() Daten zuzugreifen.

class Main extends React.Component { 
    render() { 
    return (
     <div> 
     <h1>Login Status: { state.isLoggedIn }</h1> 
     <button onClick={this.props.login}>Login</button> 
     </div> 
    ) 
    } 
} 

const render =() => { 
    ReactDOM.render(<Main status={store.getState().isLoggedIn} login={() => store.dispatch({ type: 'TOGGLE' })}/>,  document.getElementById('root')); 
} 

store.subscribe(render); 
render(); 

Ich habe versucht, store.getState() isLoggedIn & store.getState() & this.props.status und dann den store.getState Zuordnung() isLoggedIn in der Hauptkomponente -.. Aber nichts funktioniert.

Kann mir jemand sagen, wo ich falsch liege?

Answer 1

Sie können nicht direkt auf das Geschäft zugreifen, indem Sie getState verwenden, um Daten zu finden. Die Redux docs erklären den Prozess in der Tiefe, aber im Grunde werden Sie jede Komponente mit dem Redux-Speicher verbinden mit connect Methode des react-redux Pakets.

Hier ist ein Beispiel dafür, wie dies für die obige Komponente funktionieren könnte:

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import Main from '../components/Main' 

class MainContainer extends Component { 
    render() { 
    return <Main {...this.props} /> 
    } 
} 

const mapStateToProps = state => ({ 
    isLoggedIn: state.isLoggedIn, 
}) 

const mapDispatchToProps = dispatch => ({ 
    login() { 
    dispatch({type: 'TOGGLE'}) 
    }, 
}) 

MainContainer = connect(
    mapStateToProps, 
    mapDispatchToProps, 
)(MainContainer) 

export default MainContainer 

Sie würden dann die MainContainer anstelle der Main Komponente machen möchten. Der Container wird isLoggedIn und login als Requisiten an Main übergeben, wenn es es rendert.