概念证明示例

Question

我开始玩redux，并以为自己用长长的if或switch语句创建reducer函数似乎很杂乱无章。因此，我创建了状态证明逻辑将在动作创建者中使用的概念证明，但是我不确定这样做是否违反了某些Flux或redux原理。我想知道将这种逻辑放入派遣的动作对象中是否有任何主要缺点。

概念证明示例

使用reducer创建商店，该商店执行从分派的动作执行变异方法：

import { createStore } from "redux";
const store = createStore((state, action) => {
    if (action.mutation) {
        const mutatedStated = action.mutation({ ...state });
        return { ...state, ...mutatedStated };
    }
    return state;
});

然后使用方法生成操作者以生成新的状态对象：

export const updateName = (name) => {
    return {
        mutation(state) {
            return { ...state, name };
        },
        type: "UPDATE_NAME",
    }
}

用法：

store.dispatch(updateName("Your friend Ken"))

const createStore = Redux.createStore;
const store = createStore((state, action) => {
  if (action.mutation) {
    const mutatedStated = action.mutation({ ...state
    });
    return { ...state,
      ...mutatedStated
    };
  }
  return state;
});

// inital state
store.dispatch({
  type: "testing",
  mutation: () => {
    return {
      name: "test"
    }
  }
});

console.log(store.getState());

// action creator
const setName = (name) => {
  return {
    mutation: (state) => {
      return { ...state,
        name
      }
    },
    type: "set name"
  }
}

store.dispatch(setName("Your friend Ken!"));

console.log(store.getState());

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.js"></script>

Answer 1

状态更新逻辑应独立于动作，以便不同的化简器可以在给定相同动作的情况下以不同的方式更新状态。在动作中包含状态更新逻辑将两者结合在一起，如果需要多个化简器来处理该动作，则必须在该动作中为每个不同的化简器编写一个状态更新回调。

如果要保持减速器清洁，只需将复杂的内容分解为实用程序功能即可。

Redux调度一个动作，该动作包含要从reducer调用的方法

概念证明示例

1 个答案: