如何使用前一个操作的返回结果链接 redux 操作？

Question

我正在使用 React Native 构建一个应用，并使用 Redux 和 redux-persist 充当设备数据库。

问题的症结在于，我如何返回一个 redux 操作的结果，然后用这些数据调度另一个操作？请继续阅读以了解更多细节。

用户可以创建自定义习惯类型。这样做时，我会发送一个动作来在商店中创建一个习惯类型（例如“跑步”）。此操作会为习惯类型生成一个新的唯一 UUID。然后我想将这个新创建的习惯类型添加到例程中（例如“早上例程”），因此我需要接收回习惯类型的 UUID 并调用另一个调度将其添加到例程中。

我使用immer 来简化reducer 中的状态操作，并使用以下代码（简化示例）：

import produce from "immer";

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_CUSTOM_HABIT_TYPE: {
      return produce(state, draftState => {
        const newHabitType = {
          id: generateUuid(),
          name,
        };

        draftState.customHabitTypes.push(newHabitType);

        return draftState;
      });
    }
  }
};

然后我将它发送到我的组件中，就像这样（简化）：

dispatch({
  type: ADD_CUSTOM_HABIT_TYPE,
  name: "running",
});

在创建这种新习惯类型之后，我怎么能说调度另一个动作并将其添加到我的例程中？

我查看了redux-thunk 和redux-saga，并花了几个小时阅读这些内容并试图让redux-thunk 工作，但无济于事。我相信这一定很简单，但我是空白的，所以也许其他人也是如此，因此这篇文章。

Answer 1

一个非常简单的解决方案是在调度操作之前生成唯一 id。

示例

const newHabitType = {
  id: generateUuid(),
  name,
};

dispatch({
  type: ADD_CUSTOM_HABIT_TYPE,
  habit: newHabitType,
});

dispatch({
  type: ADD_CUSTOM_HABIT_TO_ROUTINE,
  habit: newHabitType.id,
});

优点

1. 您不再需要将操作本身链接起来，只需按顺序分派它们即可。
2. 这保留了最重要的 Redux 准则之一：您的 reducer 不应该有任何副作用（在您的情况下，生成一个随机 id）。 reference

缺点

1. 如果您在多个地方创建新习惯，则必须在您发送操作的每个地方生成唯一 ID。这可能会导致重复代码。解决方案是将创建习惯的整个逻辑封装到单个组件中，然后在任何地方重用该组件。

Answer 2

Action 本身不返回数据，它们只是根据 reducer 中定义的规则改变存储的对象。两种可能的解决方案：

选项A，创建复合动作。

const compositeAction = args => {
    return dispatch => {
        return someAsyncCall(args).then(response => {
           dispatch(addCustomHabitat(response))
           dispatch(followUpAction())
        }
    }
}

const addCustomHabitat = response => {
    return {
        type: "ADD_CUSTOM_HABIT_TYPE",
        data: response
    }
}

const followUpAction = () => {
    ...another action...
}

选项B，将第一个动作的结果通过react-redux连接到调度组件，传递给第二个动作。

import {connect} from 'react-redux';

const MyReactComponent = props => {
    dispatch(addCustomHabitatTypeAction());

    if(props.customHabitatType !== undefined)
        dispatch(followUpAction(props.customHabitatType());

    return (
       ...JSX here...
    );
}

const mapStateToProps = state => {
    return {
        customHabitatType: state.userReducer.customHabitatType
    }
}

connect(mapStateToProps)(MyReactComponent);

我希望这会有所帮助！请原谅我的缩写代码，如果您有任何问题，请告诉我。