web-dev-qa-db-fra.com

Redux connect () avec plusieurs actions/états

Quelle est la bonne façon de connecter plusieurs états aux créateurs d’actions correspondants dans Redux? Et est-ce même une bonne idée? Comment puis-je contourner cela si c'est une idée stupide?

export default connect(

// which part of the Redux global state does
// our component want to receive as props?
(state) => {
  return {
    state: state.instagram
  };
},

// which action creators does
// it want to receive by props?
(dispatch) => {
  return {
    actions: bindActionCreators(instagramActions, dispatch)
  };
}

)(FeedContainer);

Ce que je veux fondamentalement, c'est quelque chose comme ça:

...
state: {state.instagram, state.facebook}
...

...
const mergedActions = {instagramActions, facebookActions};
actions: bindActionCreators(mergedActions , dispatch)
...
reactjsconnectreduxredux-framework
11
Livioso

Utilisation des rappels fournis mapStateTopProps et mapDispatchToProps est le moyen approprié de connecter votre composant à un sous-ensemble filtré de votre état et à l'actionCreators déjà lié. 

Pour réaliser ce que vous voulez, vous pouvez simplement faire:

(state) => {
  const { instagram, facebook } = state;
  return {
    state: { instagram, facebook }
  };
}

et 

(dispatch) => {
  return {
     actions: bindActionCreators(Object.assign({}, instagramActions, facebookActions), dispatch)
  };
}

Cela ne fonctionne pas:

actions: bindActionCreators({instagramActions, facebookActions} , dispatch)

comme la méthode ne supporte pas encore les objets imbriqués. Voir le code ici . Il ne fait que parcourir les touches et rechercher des fonctions. 

Dans votre rappel mapDispatchToProps, vous pouvez laisser la couche d'état supplémentaire

(state) => {
   const { instagram, facebook } = state;
   return {
      instagram, 
      facebook
   };
}

En faisant cela, vous pouvez accéder aux accessoires avec:

this.props.facebook et this.props.instagram au lieu de this.props.state.facebook et this.props.state.instagram. Mais ce n'est qu'une question de style, je pense.

Il existe plusieurs façons de lier votre état et d’envoyer des accessoires. Au final c'est une question de style. Je pourrais donner plusieurs exemples de la façon de le faire, mais il vaut mieux jeter un coup d'œil à la documentation officielle et trouver votre propre style https://github.com/reactjs/react-redux/blob/master/docs/api. md

14
larrydahooster

Ou vous pouvez simplement faire cela:

import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return {
    todoActions: bindActionCreators(todoActionCreators, dispatch),
    counterActions: bindActionCreators(counterActionCreators, dispatch)
  }
}

comme indiqué dans la documentation de react-redux

2
Phill

Je sais que c’est une vieille question, mais si quelqu'un d'autre souhaite mapper toutes les actions dans une seule clé dans this.props (comme moi), j'ajoute mes deux centimes ici.

En développant le commentaire de DavinTryon sur la réponse acceptée, un autre moyen d'obtenir "mergedActions" consiste à utiliser l'opérateur spread, en particulier si vous souhaitez utiliser une clé (par exemple, actions) pour toutes les actions et les appeler à l'aide de this.props.actions.[specificAction]. Voici ce que vous devez faire dans la méthode connect:

export default connect(
(state) => {
  return {
    state: state.instagram
  };
},

(dispatch) => {
  return {
    actions: bindActionCreators({...instagramActions, facebookActions}, dispatch)
  };
}

)(FeedContainer);

Si vous déclarez les méthodes séparément (avec quelque chose comme mapDispatchToProps et mapStateToProps), vous pouvez écrire votre mapDispatchToProps comme suit:

const mapDispatchToProps = dispatch => {
  return {
    actions: bindActionCreators({ ...instagramActions, facebookActions }, dispatch)
  };
};

Cela mappera tous vos créateurs d’action dans facebookActions et instagramActions à this.props.actions.

1
Ishita Sinha