État d'accès à l'intérieur de mapDispatchToProps méthode

J'ai écrit un composant conteneur à l'aide de redux et ma mise en œuvre pour mapDispathToProps ressemble à ceci

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onChange: (newValue) => {
            dispatch(updateAttributeSelection('genre', newValue));
            dispatch(getTableData(newValue, ownProps.currentYear));
        }
    }
}

Le problème est que, pour getTableData j'ai besoin de l'état de certains autres composants. Comment puis-je accéder à l'état d'objet dans cette méthode?

InformationsquelleAutor Knows Not Much | 2016-03-07
  1. 34

    Vous pouvez utiliser redux-thunk pour créer une action distincte créateur de la fonction qui a accès à getState, plutôt que de définir la fonction à l'intérieur de mapDispatchToProps:

    function doTableActions(newValue, currentYear) {
    return (dispatch, getState) => {
        dispatch(updateAttributeSelection('genre', newValue));
        let state = getState();
        //do some logic based on state, and then:
        dispatch(getTableData(newValue, currentYear));
    }
}


let mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onChange : (newValue) => {
            dispatch(doTableActions(newValue, ownProps.currentYear))
        }
    }
}

    Quelques différentes façons d'organiser ceux-ci, mais quelque chose comme ça devrait marcher.

    • Je pense que le réel de cas d'utilisation pour l'accès à l'état dans mapDispatchToProps est de savoir quelles actions sont disponibles au moment de l'exécution. Par exemple, vous pouvez mapper toutes les mesures possibles pour une fonction et l'appel à l'envoi de l'action ou de tester avec une clause if pour vérifier si l'action est disponible.
    InformationsquelleAutor markerikson
  2. 13

    Est Possible également d'utiliser mergeProps qui fusionne mapState et mapDispatch et permet d'utiliser les deux en même temps.

    //Define mapState
const mapState = (state) => ({
  needeedValue: state.neededValue
})

//Define mapDispatch
const mapDispatch = (dispatch, ownProps) => {
  return {
    onChange: (newValue, neededValue) => {
      dispatch(updateAttributeSelection('genre', newValue));
      dispatch(getTableData(newValue, ownProps.currentYear, neededValue));
    }
  }
}

//Merge it all (create final props to be passed)
const mergeProps = (stateProps, dispatchProps, ownProps) => {
  return {
    ...stateProps,  //optional
    ...dispatchProps,  //optional
    onChangeWithNeededValue: (newValue) => (
      dispatchProps.onChange(
        newValue,
        stateProps.needeedValue  //<<< here the magic happens
      )
    )
  }
}

//Pass mergePros to connect
const MyContainer = connect(mapState, mapDispatch, mergeProps)(MyComponent);

    La documentation officielle: réagir-redux#connect

    Performances possibles de drawback sur les plus grandes applications: Un Débordement de pile - interprétations et Exécutions et les mergeProps dans Redux

    • Cette solution passe aussi onChange à MyComponent. Vous devez exclure cet accessoire dans le cas où vous ne voulez transmettre onChangeWithNeededValue.
    InformationsquelleAutor exmaxx
  3. 4

    Vous pouvez simplement utiliser redux-thunk pour obtenir de l'état.
    Écrire une fonction d'aide comme ceci:

    const getState = (dispatch) => new Promise((resolve) => {
  dispatch((dispatch, getState) => {resolve(getState())})
})

    Vous pouvez l'utiliser dans une fonction async ou générateur de fonction:

    const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    async someFunction() {
      const state = await getState(dispatch)
      ...
    }
  }
}
    InformationsquelleAutor llwwns
  4. 2

    Si vous avez utilisé Thunk Middleware, alors vous pouvez écrire fonction d'assistance dans votre
    Action.Js 

    export const getSearchedText =  () => (dispatch, getState) => {
    const { app } = getState();
    return app.searchedText;
}

    Si vous avez utilisé le conteneur de modèle de conception, votre propriété récipient doit être en dessous de

    Container.js

    export const mapDispatchToProps = (dispatch, ownProps) => {
    return {
             setSearch: search => {
                 var searchedText = dispatch(getSearchedText());
             }
}
    InformationsquelleAutor chmod
  5. 0

    Vous pouvez essayer d'utiliser:

    redux-nommé-réducteurs

    Qui vous permet d'obtenir l'état de n'importe où dans votre code comme suit:

    const localState1 = getState(reducerA.state1)
const localState2 = getState(reducerB.state2)

    De même dans mapDispatchToProps:

    const mapDispatchToProps = dispatch => {
  return {
    onClick: () => {
      dispatch(someAction(getState(moduleA.state1)));
    }
  };
};
    InformationsquelleAutor miles_christian