如何访问Redux减速机内部的状态?

twi*_*lco 68 javascript reactjs redux

我有一个reducer,为了计算新的状态,我需要来自动作的数据,以及来自该reducer未管理的部分状态的数据.具体来说,在减速机中我将在下面显示,我需要访问该accountDetails.stateOfResidenceId字段.

initialState.js:

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

        ]
    }
};
Run Code Online (Sandbox Code Playgroud)

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;
  }
}
Run Code Online (Sandbox Code Playgroud)

index.js(root reducer):

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

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

export default rootReducer;
Run Code Online (Sandbox Code Playgroud)

我该如何访问此字段?

Cry*_*fel 88

我会使用thunk,这是一个例子:

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

    dispatch({
      type: UPDATE_PRODUCT,
      stateOfResidenceId: accountDetails.stateOfResidenceId,
      product,
    });
  };
}
Run Code Online (Sandbox Code Playgroud)

基本上,您可以获得操作所需的所有数据,然后您可以将该数据发送到reducer.

  • 知道为什么* REDUX *本身不将当前状态显示给reducer吗?似乎奇怪的是,在调度时我需要向reducer添加无关的东西,以使初始状态不会覆盖其他与当前调度调用无关的东西的当前状态 (2认同)

mar*_*son 9

您可以选择编写更多逻辑,而不仅仅是使用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.

  • 是的,thunk是管理副作用和执行涉及多个调度和使用当前应用程序状态的复杂逻辑的标准基本方法.编写一个读取当前应用程序状态的thunk函数是完全正常的,并执行有条件调度,调度多个操作或抓取部分状态并将其包含在调度操作中的操作.我在https://gist.github.com/markerikson/ea4d0a6ce56ee479fe8b356e099f857e上有一些常见的thunk模式示例. (2认同)