访问和依赖 useReducer 中的道具是反模式？答案

【问题标题】：Accessing & Relying on Props inside useReducer an Anti-Pattern?访问和依赖 useReducer 中的道具是反模式？
【发布时间】：2021-05-30 20:51:06
【问题描述】：

我有一个组件App()，它需要一些道具，称为data。 App 组件通过useReducer 管理其状态。根据减速器的状态，我会显示/隐藏 data 道具中的某些数据。我的减速器还根据data 中的内容计算新状态。所以举个例子，要得到一个新的id，我的reducer需要通过data找到下一个id。

const App = ({ data }) => {
    //...
    const reducer = 
        (state, action) => {
            switch (action.type) {
                case 'NEXT_TAB': {
                    let nextTabIndex = state.activeTab + 1;
                    let nextId = data.tabs[nextTabIndex].id; //<==== Worried about this line here, accessing data prop

                    return {
                        ...state,
                        state.activeTabId: nextId
                    };
                }
                default:
                    return state;
            }
        }
       //....
       const [myState, dispatch] = useReducer(reducer, state);
       //....

当我在这里实现它时，我的App 组件接收data 作为props。

在我的减速器中，我访问了这些道具：

let nextId = data.tabs[nextTabIndex].id

我的问题是这是否违背了减速器使用和利用收到的道具的想法？或者，每次我调用一个动作时，我都可以将 data 道具传递给我的减速器。但是，我担心这会使一切变得更慢和不必要的复杂？

【问题讨论】：

标签： javascript reactjs react-hooks reducers use-reducer

【解决方案1】：

虽然您的方法可能没有任何问题，如果不太可能是真的，您的应用程序仅包含 App 组件。

Redux 理念和Flux 架构模式旨在将状态管理集中在单个主干组件store中。这背后的明确且非常合理的意图和目标是随着您的应用程序规模不断扩大，降低状态管理的复杂性。

你的方式，在你的组件中声明一个 reducer 并与你的组件紧密耦合props，一旦一个（或多个其他）组件使用/依赖，可能会导致不可预测的结果和大量的扩展复杂性state.activeTabId 属性。

您可以阅读more on Redux development guidelines，更具体地说，根据本地组件props，您违反了一条规则：

Reducer 函数应该只依赖于它们的状态和动作参数，并且应该只根据这些参数计算和返回一个新的状态值。它们不得执行任何类型的异步逻辑（AJAX 调用、超时、承诺）、生成随机值（Date.now()、Math.random()）、修改 reducer 外部的变量，或运行其他影响外部事物的代码reducer 函数的作用域。

【讨论】：