Comment accéder à l'état à l'intérieur du réducteur Redux?

Question

J'ai un réducteur, et afin de calculer le nouvel état j'ai besoin de données à partir de l'action et également des données à partir d'une partie de l'état ne sont pas gérés par ce réducteur. Plus précisément, dans le réducteur, je vais montrer ci-dessous, j'ai besoin d'accéder à l' accountDetails.stateOfResidenceId champ.

initialState.js:

export default {
    accountDetails: {
        stateOfResidenceId: '',
        accountType: '',
        accountNumber: '',
        product: ''
    },
    forms: {
        blueprints: [

        ]
    }
};

formsReducer.js:

import * as types from '../constants/actionTypes';
import objectAssign from 'object-assign';
import initialState from './initialState';
import formsHelper from '../utils/FormsHelper';
export default function formsReducer(state = initialState.forms, action) {
  switch (action.type) {
    case types.UPDATE_PRODUCT: {
        //I NEED accountDetails.stateOfResidenceId HERE
        console.log(state);
        const formBlueprints = formsHelper.getFormsByProductId(action.product.id);
        return objectAssign({}, state, {blueprints: formBlueprints});
    }

    default:
      return state;
  }
}

index.js (racine réducteur):

import { combineReducers } from 'redux';
import accountDetails from './accountDetailsReducer';
import forms from './formsReducer';

const rootReducer = combineReducers({
    accountDetails,
    forms
});

export default rootReducer;

Comment puis-je accéder à ce champ?

Answer 1

Je voudrais utiliser thunk pour cela, voici un exemple:

 export function updateProduct(product) {
  return (dispatch, getState) => {
    const { accountDetails } = getState();

    dispatch({
      type: UPDATE_PRODUCT,
      stateOfResidenceId: accountDetails.stateOfResidenceId,
      product,
    });
  };
}
 

En gros, vous obtenez toutes les données dont vous avez besoin sur l'action, vous pouvez ensuite les envoyer à votre réducteur.

Answer 2

Vos options sont soit de créer plus logique d'ailleurs une juste utilisation de combineReducers, ou inclure plus de données dans l'action. Le Redux FAQ couvre ce sujet: http://redux.js.org/docs/faq/Reducers.html#reducers-share-state .

Aussi, je suis en train de travailler sur un nouvel ensemble de pages, le Redux docs sur le sujet de "la Structuration des Réducteurs", qui peuvent vous être utiles. L'actuel WIP pages sont à https://github.com/markerikson/redux/blob/structuring-reducers-page/docs/recipes/StructuringReducers.md .

Answer 3

Je sugguest que vous passiez à l'action du créateur. Donc, quelque part, vous allez avoir un créateur qui fait quelque chose comme ceci:

updateProduct(arg1, arg2, stateOfResidenceId) {
  return {
    type: UPDATE_PRODUCT,
    stateOfResidenceId
  }
}

À l'endroit où vous déclencher l'action, supposons que vous êtes à l'aide de réagir, vous pouvez utiliser

function mapStateToProps(state, ownProps) {
  return {
    stateOfResidenceId: state.accountdetails.stateOfResidenceId
  }  
}

et de vous connecter à votre réagissent à l'aide de la réaction-redux de se connecter.

connect(mapStateToProps)(YourReactComponent);

Maintenant, dans votre réagissent composant lorsque vous déclenchez l'action updateProduct, vous devriez avoir le stateOfResidenceId comme un accessoire, et vous pouvez passer à votre action créatrice.

Il semble compliquée, mais c'est vraiment de la séparation des préoccupations.

Answer 4

Vous pouvez essayer d'utiliser:

redux-named-réducteurs

Ce qui vous permet d'obtenir l'état n'importe où dans votre code, comme ceci:

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

Mais pensons d’abord s’il serait préférable de passer l’état externe comme une charge utile dans l’action.

Answer 5

Lors de l'envoi d'une action, vous pouvez transmettre un paramètre. Dans ce cas, vous pouvez passer accountDetails.stateOfResidenceId à l'action puis la transmettre au réducteur en tant que charge utile.