React-redux Komponente ist rerender nicht auf Speicherzustandsänderung

Question

Ich stelle heute lernen zu reagieren und redux, aber ich kann nicht herausfinden, wie Komponente zu zwingen, nach Statusänderung rerender.

Hier ist mein Code:

const store = createStore(loginReducer); 
export function logout() { return {type: 'USER_LOGIN'} } 
export function logout() { return {type: 'USER_LOGOUT'} } 
export function loginReducer(state={isLogged:false}, action) { 
    switch(action.type) { 
    case 'USER_LOGIN': 
     return {isLogged:true}; 
    case 'USER_LOGOUT': 
     return {isLogged:false}; 
    default: 


     return state; 
     } 
    } 

    class App extends Component { 

     lout(){ 
     console.log(store.getState()); //IT SHOW INITIAL STATE 
     store.dispatch(login()); 
     console.log(store.getState()); //IT SHOWS THAT STATE DID CHANGE 
     } 

     ////THIS IS THE PROBLEM, 
    render(){ 
    console.log('rendering') 
    if(store.getState().isLogged){ 
     return (<MainComponent store={store} />); 
    }else{ 
     return (
     <View style={style.container}> 
      <Text onPress={this.lout}> 
      THE FOLLOWING NEVER UPDATE :(!!{store.getState().isLogged?'True':'False'}</Text> 
      </View> 
     ); 
    }  
} 

Der einzige Weg, i-Update auslösen könnte

store.subscribe(()=>{this.setState({reload:false})}); 

innerhalb Konstruktor unter Verwendung, so dass ich manuell ein Update Zustand der Komponente auslösen rerender zu erzwingen.

aber wie kann ich sowohl den Speicher- als auch den Komponentenstatus verknüpfen?

Answer 1

Ihre Komponente wird nur neu gerendert, wenn ihr Status oder ihre Requisiten geändert werden. Sie verlassen sich nicht auf this.state oder this.props, sondern rufen den Status des Speichers direkt in Ihrer Renderfunktion ab.

Stattdessen sollten Sie connect verwenden, um die Anwendungsstatus zu Komponente Requisiten abzubilden. Komponente Beispiel:

import React, { PropTypes } from 'react'; 
import { connect } from 'react-redux'; 

export class App extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
    } 

    render() { 
     return (
      <div> 
      {this.props.isLoggedIn ? 'Logged In' : 'Not Logged In'} 
      </div> 
     ); 
    } 
} 

App.propTypes = { 
    isLoggedIn: PropTypes.bool.isRequired 
}; 

function mapStateToProps(state, ownProps) { 
    return { 
     isLoggedIn: state.isLoggedIn 
    }; 
} 

export default connect(mapStateToProps)(App); 

In diesem sehr vereinfachten Beispiel, wenn die isLoggedIn Wertänderungen des speichert, wird automatisch die entsprechende Stütze auf Ihrer Komponente aktualisieren, die es verursacht zu machen.

ich die reagieren-redux docs empfiehlt das Lesen zu erleichtern Ihnen den Einstieg: http://redux.js.org/docs/basics/UsageWithReact.html