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

IT技术 javascript reactjs redux
2021-04-02 23:11:59

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

初始状态.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;

如何访问此字段？

6个回答

我会为此使用thunk，这是一个例子：

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

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

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

知道为什么REDUX本身没有将当前状态暴露给减速器吗？似乎很奇怪，在调度时我需要向减速器添加不相关的东西，这样初始状态就不会将其他无关内容的当前状态覆盖到当前调度调用
2021-05-26 23:11:59

您的选择是在仅使用 之外编写更多逻辑combineReducers，或者在操作中包含更多数据。Redux FAQ 涵盖了这个主题：

https://redux.js.org/faq/reducers/

另外，我目前正在研究 Redux 文档的一组新页面，主题是“结构化减速器”，您可能会发现这些页面会有所帮助。当前 WIP 页面位于https://github.com/markerikson/redux/blob/structuring-reducers-page/docs/recipes/StructuringReducers.md。

感谢您的回答。我已经探索了您链接的一些资源，并将继续这样做。然而，问你，因为你似乎知识渊博。另一个答案建议使用thunk. 你认为这能很好地解决我的问题吗？如果它会使我的代码变得一团糟或者不是最佳实践，那么这不是我想要追求的解决方案，但我觉得知识不足，无法确定这些选择的长期影响。
2021-06-06 23:11:59
是的，thunk 是管理副作用和执行涉及多个分派和使用当前应用程序状态的复杂逻辑的标准基本方法。编写一个读取当前应用程序状态的 thunk 函数是完全正常的，并且执行诸如有条件分派、分派多个动作或获取部分状态并将其包含在分派动作中等操作。我在gist.github.com/markerikson/ea4d0a6ce56ee479fe8b356e099f857e 上有一些常见的 thunk 模式示例。
2021-06-18 23:11:59

我不确定这种方法是否是一种反模式，但它对我有用。在您的操作中使用柯里化函数。

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

编写自己的组合函数很简单，它完全符合您的要求：

import accountDetails from './accountDetailsReducer';
import forms from './formsReducer';

const rootReducer = (state, action) => {
        const newState = {};

        newState.accountDetails = accountDetails(state.accountDetails, action);
        newState.forms = forms(state.forms, action, state.accountDetails);

        return newState;
    };

export default rootReducer;

您的 FormReducer 将是：

export default function formsReducer(state = initialState.forms, action, accountDetails) {

formsReducer 现在可以访问 accountDetails。

这种方法的好处是你只公开你需要的状态片，而不是整个状态。

我建议您将其传递给动作创建者。所以在某个地方你会有一个动作创建者，它会做这样的事情：

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

在触发动作的地方，假设你使用的是react，你可以使用 

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

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

connect(mapStateToProps)(YourReactComponent);

现在，在您触发操作 updateProduct 的react组件中，您应该将 stateOfResidenceId 作为props，并且您可以将其传递给您的操作创建者。

这听起来很复杂，但实际上是关于关注点分离。

其它你可能感兴趣的问题
上一篇传递类名以响应组件 下一篇React：我可以操作 React 渲染的 DOM 多少？