Question

我正在React Native中构建一个应用程序，并将Redux与redux-persist结合使用以充当设备数据库。

问题的症结在于，如何返回redux操作的结果，然后使用该数据分派另一个操作？请继续阅读以获取更多细节。

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

我正在使用immer来简化化简器中的状态，并使用以下代码（简化示例）：

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,
});

专业人士

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

缺点

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

Answer 2

动作本身并不返回数据，它们只是简单的对象，它们根据化简器中定义的规则对存储进行更改。两种可能的解决方案：

选项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);

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

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

2 个答案: