it-roy-ru.com

Как получить доступ к состоянию внутри редуктора Redux?

У меня есть редуктор, и для расчета нового состояния мне нужны данные из действия, а также данные из части состояния, не управляемой этим редуктором. В частности, в редукторе, который я покажу ниже, мне нужен доступ к полю accountDetails.stateOfResidenceId.

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 (корневой редуктор):

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

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

export default rootReducer;

Как я могу получить доступ к этому полю?

50
twilco

Я бы использовал thunk для этого, вот пример:

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

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

По сути, вы получаете все данные, необходимые для действия, а затем можете отправить эти данные своему редуктору.

70
Crysfel

Вы можете либо написать больше логики помимо использования combineReducers, либо включить больше данных в действие. Redux FAQ охватывает эту тему: http://redux.js.org/docs/faq/Reducers.html#reducers-share-state .

Кроме того, в настоящее время я работаю над новым набором страниц для документов Redux на тему «Структурирование редукторов», что может оказаться полезным для вас. Текущие страницы WIP находятся по адресу https://github.com/markerikson/redux/blob/structuring-reducers-page/docs/recipes/StructuringReducers.md .

8
markerikson

Я полагаю, что вы передаете это создателю действия. Так что где-нибудь у вас будет создатель действий, который делает что-то вроде этого: 

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

В месте, где вы запускаете действие, предположим, что вы используете ответ, вы можете использовать 

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

и подключитесь к вашему реактивному компоненту с помощью реактивного соединения. 

connect(mapStateToProps)(YourReactComponent);

Теперь в вашем компоненте реагирования, где вы запускаете действие updateProduct, вы должны иметь в качестве реквизита stateOfResidenceId и передать его создателю действия. 

Это звучит запутанно, но на самом деле речь идет о разделении интересов. 

0
Xing Wang

Вы можете попробовать использовать:

редуцированные именованные редукторы

Который позволяет вам получить состояние в любом месте вашего кода следующим образом:

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

Но сначала подумайте, будет ли лучше передать внешнее состояние в качестве полезной нагрузки в действии. 

0
miles_christian

Я не уверен, является ли этот подход анти-паттерном, но он работал для меня. Используйте карри функцию в ваших действиях.

export const myAction = (actionData) => (dispatch, getState) => {
   dispatch({
      type: 'SOME_ACTION_TYPE',
      data: actionData,
      state: getState()
   });
}
0
user3377090