如何访问Redux Reducer内部的状态？

JavaScript

L神无Mandy

2020-03-14

我有一个化简器，为了计算新状态，我需要操作中的数据以及该化简器未管理的部分状态数据。具体来说，在下面将显示的reducer中，我需要访问该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;

如何访问此字段？

第1607篇《如何访问Redux Reducer内部的状态？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
理查德理查德 2020.03.14

在分派动作时，您可以传递参数。在这种情况下，您可以传递accountDetails.stateOfResidenceId给操作，然后将其作为有效负载传递给reducer。

飞云Tom小宇宙 2020.03.14

您可以尝试使用：

名为redux的减速器

这样您就可以在代码中的任何地方获取状态，如下所示：

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

但是首先考虑是否最好将外部状态作为有效负载传递给操作。

杨天栾 2020.03.14

您的选择是要么仅使用编写更多逻辑combineReducers，要么在操作中包含更多数据。Redux常见问题解答涵盖了以下主题：http : //redux.js.org/docs/faq/Reducers.html#reducers-share-state。

另外，我目前正在针对Redux docs主题为“结构化减速器”的一组新页面进行工作，您可能会有所帮助。当前的WIP页面位于https://github.com/markerikson/redux/blob/structuring-reducers-page/docs/recipes/StructuringReducers.md。

凯理查德 2020.03.14

我将为此使用thunk，这是一个示例：

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

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

基本上，您可以获得操作所需的所有数据，然后可以将该数据发送到减速器。

蛋蛋伽罗猿 2020.03.14

我建议您将其传递给动作创建者。因此，在某个地方，您将有一个动作创建者来执行以下操作：

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

在您触发动作的地方，假设您正在使用反应，则可以使用 

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

并使用react-redux的connect连接到您的react组件。 

connect(mapStateToProps)(YourReactComponent);

现在，在您触发动作updateProduct的react组件中，您应该将stateOfResidenceId作为道具，然后可以将其传递给动作创建者。

这听起来有些令人费解，但实际上是有关关注点分离的问题。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android