web-dev-qa-db-fra.com

Le composant React-redux ne se rend pas lors du changement d'état du magasin

Je déclare apprendre à réagir et à redux aujourd'hui, mais je ne peux pas comprendre comment forcer le composant à se restituer après un 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 de déclencher la mise à jour est d'utiliser

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

à l'intérieur du constructeur, afin que je déclenche manuellement un état de mise à jour du composant pour forcer le rendu.

mais comment puis-je lier les états des magasins et des composants?

reactjsreact-nativereduxreact-redux
13
Zalaboza

Votre composant ne sera rendu à nouveau que si son état ou ses accessoires sont modifiés. Vous ne comptez pas sur this.state ou this.props, mais récupérez plutôt l'état du magasin directement dans votre fonction de rendu.

Au lieu de cela, vous devez utiliser connect pour mapper l'état de l'application aux accessoires de composant. Exemple de composant:

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 cet exemple très simplifié, si la valeur isLoggedIn du magasin change, il mettra automatiquement à jour l'accessoire correspondant sur votre composant, ce qui entraînera son rendu.

Je suggère de lire les documents react-redux pour vous aider à démarrer: http://redux.js.org/docs/basics/UsageWithReact.html

19
Danny