para - redux react español

Estado de acceso dentro del método mapDispatchToProps

Question

He escrito un componente contenedor con redux y mi implementación para mapDispathToProps se parece a esto

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

El problema es que para obtenerTableData necesito el estado de algunos otros componentes. ¿Cómo puedo acceder al objeto estatal en este método?

Answer 1

Puede usar redux-thunk para crear una función de creador de acción independiente que tenga acceso a getState , en lugar de definir la función dentro 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))
        }
    }
}

Algunas formas diferentes de organizarlos, pero algo así debería funcionar.

Answer 2

Puedes intentar usar:

redux-named-reducers

Lo que le permite obtener el estado en cualquier parte de su código como tal:

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

Del mismo modo en mapDispatchToProps:

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

Answer 3

Puedes usar redux-thunk para obtener el estado. Escribe una función de ayuda como esta:

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

Puedes usar esto en una función asíncrona o en una función de generador:

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

Answer 4

Si ha utilizado Thunk Middleware, puede escribir la función de ayuda en su Action.Js

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

Si ha utilizado el patrón de diseño del contenedor, el contenedor de su propiedad debe estar debajo

Container.js

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

Answer 5

Un posible enfoque también es usar mergeProps que combina mapState y mapDispatch y permite usar ambos al mismo tiempo.

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

Documentación oficial: react-redux#connect

Posible inconveniente en el rendimiento de aplicaciones más grandes: Desbordamiento de pila - Rendimientos y combinación de efectos en Redux