web-dev-qa-db-fra.com

Mapper les propriétés à déclarer dans react-redux

J'ai un composant qui utilise state pour fournir des données à l'utilisateur. Par exemple <div>this.state.variableInState</div>. Ce composant peut envoyer une méthode (par exemple, sur l'action onClick). J'utilise actuellement react-redux une méthode connect pour mapper store à props. Existe-t-il un moyen de setState après l'envoi? 

// actions
export function executeAction() {
  return function (dispatch, getState) {
    dispatch({
      type: 'MY_ACTION',
      payload: axios.get('/some/url')
    });
  };
}
// reducer

export default function (state = {}, action) {
  switch (action.type) {
    case 'MY_ACTION_FULFILLED':
      return {...state, myVariable: action.payload.data}
  }
}
//component
class MyComponent extends Component {
  render() {
    (<div onClick={this.props.executeAction.bind(this)}>
      {this.state.variableInState}
      </div>)
  }

  someOtherMethod() {
    // I want to operate with state here, not with props
    // that's why my div gets state from this.state instead of this.props
    this.setState({variableInState: 'someValue'})
  }
}


export default connect((state, ownProperties) => {
  return {
    // So I want to change MyComponent.state.variableInState here
    // but this method updates MyComponent props only
    // What can I do?
    variableInProps: state.myVariable
  }
}, {executeAction})(MyComponent);
javascriptreactjsreduxreact-redux
5
deathangel908

Quoi que je comprenne, tout ce que vous voulez faire est de convertir les accessoires du composant dans son propre état. Vous pouvez toujours changer les accessoires du composant pour passer à l'état du composant dans la méthode du cycle de vie componentWillReceiveProps dans ce composant.

//component
class MyComponent extends Component {
  componentWillReceiveProps(newProps){
     if(newProps.variableInProps != this.props.variableInProps){
         this.setState({variableInState: newProps.variableInProps })
     }
  }
  render() {
    (<div onClick={this.props.executeAction.bind(this)}>
      {this.state.variableInState}
      </div>)
  }

  someOtherMethod() {
    // I want to operate with state here, not with props
    // that's why my div gets state from this.state instead of this.props
    this.setState({variableInState: 'someValue'})
  }
}


export default connect((state, ownProperties) => {
  return {
    // So I want to change MyComponent.state.variableInState here
    // but this method updates MyComponent props only
    // What can I do?
    variableInProps: state.myVariable
  }
}, {executeAction})(MyComponent);

La méthode componentWillReceiveProps est toujours exécutée en réagissant lorsqu'un nouvel accessoire arrive dans le composant. C'est donc le bon endroit pour mettre à jour l'état de votre composant en fonction de vos accessoires.

7
Prakash Sharma

Je pense que vous n'êtes pas censé changer directement l'état comme ça. pourquoi ne pas appeler une autre action pour exécuter ce que vous voulez? 

L'état devrait être immuable lors de l'utilisation de Redux. Vous devriez envoyer une action. Un réducteur doit recevoir l'action et l'état actuel, et renvoyer un nouvel objet d'état contenant les modifications que vous souhaitez apporter ..__Cochez cette option: http://redux.js.org/docs/introduction/ThreePrinciples. html # changements-sont-faits-avec-des-fonctions-pures

2
kogmo

Il y a aussi static getDerivedStateFromProps:

static getDerivedStateFromProp(nextProps, prevState) {
  return {stateVar: nextProps.var} // this will propagate as component state
}
0
deathangel908

Bien sûr, onClick peut se lier à une fonction comme ceci:

onClick={this.myfunction.bind(this)}

Puis définissez cette myfuntion comme suit:

myfunction() {
    this.setState({ somestate: value });
    this.props.executeAction();
}

Ici, setState change l’état du composant natif et l’appel d’action changera l’état du redux s’il est défini de la sorte par réducteur. Ces états sont indépendants. 

Connect wrapper (premier argument) mappe l'état sur les accessoires (l'état de redux pour réagir aux accessoires) et non sur l'état du composant lui-même. 

La bonne question est pourquoi vous avez besoin des deux, bien qu'il existe quelques exemples où cela pourrait être utile ...

En général, si vous avez besoin d'un état global, utilisez l'état redux (qui s'applique facilement à tous les composants) et, pour certains états locaux, utilisez l'état natif rea. (Par exemple, lorsque vous créez des composants d'interface utilisateur tels qu'une case à cocher personnalisée) 

0
djra