Réagir-redux composant n'a pas d'rerender sur magasin de changement d'état

Je suis indiquant pour en savoir réagir et redux aujourd'hui, mais je ne peux pas comprendre comment de composante de force alors rendre à nouveau après le changement d'état.

Voici mon 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>
        );
    }    
}

La seule façon que je pouvais déclencher la mise à jour est en utilisant

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

à l'intérieur de constructeur, de sorte que je déclencher manuellement une mise à jour de l'état de la composante de la force rerender.

mais comment puis-je lier les deux types de magasin et les états qui le composent ?

OriginalL'auteur Zalaboza | 2016-07-30

  1. 12

    Votre composant va seulement rendre à nouveau si son état ou les accessoires sont modifiées. Vous ne vous basez pas sur ce point.l'état ou cette.les accessoires, mais plutôt à aller chercher de l'état de les stocker directement dans votre fonction rendu.

    Au lieu de cela, vous devez utiliser connect pour cartographier l'état de l'application de composant d'accessoires. Composant exemple:

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

    Dans ce très simplifiée exemple, si le magasin est isLoggedIn les changements de la valeur, il va automatiquement mettre à jour le correspondant prop sur votre composant, qui va l'amener à rendre.

    Je suggère la lecture de la réaction-redux docs pour vous aider à démarrer:
    http://redux.js.org/docs/basics/UsageWithReact.html

    Est App.propTypes nécessaires à l'utilisation de connect()? On dirait que vous venez de lancer dedans.
    Merci, merci beaucoup!

    OriginalL'auteur Danny