从 saga 返回值到反应组件

Question

我是 ReactJS 的新手。仍然用 redux-store 和 sagas 等将我的头包裹在所有层上。 我正在尝试将一个简单的布尔值从 saga（此时 saga 正确返回）返回到 react 组件。

这是我所拥有的：

在容器组件上我有这个：

export interface IKpaPickerConnectedDispatch {
    lookupListDialogToggle?: (dialogProps: ILookupListDialog) => void;
    requestSaveProfileFieldItem?: (profieFieldItem: IProfileFieldItem) => void;
    // setKpiPercentageShow?: (value: boolean) => void;
    updateKpaKpiProfilePercentage?: (toggle: boolean, jobId: number) => void;
    getKpaKpiProfilePercentageToggle?: (jobId: number) => void;
}

function mapStateToProps(state: IGlobalApplicationState, ownProps: IKpaPickerProps): IKpaPickerConnectedState {
    return {
        kpiPercentageShow: actions.requestKpaKpiToggle(state.jobProfileState.jobProfile!.id)
    };
}

在传奇方面，我有这个：

function* requestKpaKpiToggle(action: IKpaKpiToggleReceive)
{
    try {
        const  jobId = action.payload!;
        const REQUEST_URL = `${REMPROFILE_API_URL}/KpaKpi/GetKpaKpiJobProfilePercentageToggle/${jobId}`;
        const response = yield fetch(REQUEST_URL, secureHeader('GET'));
        const json = yield response.json();
        // new method to return value and update state
        yield put(requestKpaKpiToggleReceived(json));
    }
    catch (e) {
        yield put(logError(e));
    }
}

我收到以下错误，但不太明白为什么:-( 类型“操作”不可分配给类型“布尔”。

任何帮助将不胜感激。

更新

好的，输入后我已经设法靠近了 1 步，但还没有。

我在reducer中添加了这个用于状态管理

case ActionKeys.KPA_KPI_TOGGLE_RECEIVE: {
    global.console.log('KPA_KPI_TOGGLE_RECEIVE', action.payload);
    return state.set('isKpiPercentageShown', action.payload)
                .set('kpiPercentageReceived', true) as JobProfileState;
}

现在的问题是它没有更新

componentDidMount()
{
    if(this.props.getKpaKpiProfilePercentageToggle && !this.state.kpiPercentageReceived)
        this.props.getKpaKpiProfilePercentageToggle(this.props.jobId);
}

Answer 1

您的错误似乎来自以下行：

kpiPercentageShow: actions.requestKpaKpiToggle(state.jobProfileState.jobProfile!.id)

因为你在IKpaPickerConnectedDispatch的接口中使用TypeScript将kpiPercentageShow识别为bool。

此外，您正在尝试直接从您的操作中获取价值，这是不可能的。检查您的流程，boolean 值不应来自您的操作。在您使用 reducer 更新商店后，您应该可以在 mapStateToProps 中使用它。

Answer 2

您应该在 saga 完成时使用您的布尔值设置另一个操作，相关减速器捕获的操作。

你可以有两个动作：

REQUEST：由 saga 处理（您已经这样做了）。 REQUEST_HANDLED：由 saga 调度，由 reducer 处理。

在你的传奇中：

yield put({type: REQEUEST_HANDLED, result: true|false});

在你的减速器中：

案例 REQUEST_HANDLED： 返回 {...state, someFlag: someValue};

这是你可以做的一个例子。因为我不知道你为什么要返回一个布尔值并返回 response.json()。

我经常与 redux-saga 一起使用的模式是有一个由组件调度的动作，该动作由 saga 处理。当 saga 完成时，它会分派一个由 reducer 处理的 action，该 action 会相应地更改 store 中的状态，告诉组件工作已完成。

另外，我通常有第三个动作，由 saga 在 catch 块中使用，以防出现错误，因此通知组件并可以向用户显示消息（或对错误）。