Return 从 saga 到 React 组件的值

Question

我是 ReactJS 的新手。仍然用 redux-store 和 sagas 等围绕所有层。我正在尝试 return 来自传奇的简单布尔值（此时传奇 return 正确）到反应组件。

这是我的：

在容器组件上我有这个：

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

我收到以下错误，不太明白为什么:-( 类型 'Action' 不可分配给类型 'boolean'.

如有任何帮助，我们将不胜感激。

更新

好的，在输入后我已经接近了 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

你应该在 saga 完成时放置另一个动作，一个相关的 reducer 捕获的动作，用你的布尔值。

您可以进行 2 次操作：

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

在你的传奇中：

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

在你的减速器中：

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

这是您可以执行的操作的示例。因为我不知道你为什么要 return 布尔值和 return response.json() 而不是。

我经常在 redux-saga 中使用的模式是有一个由组件分派的动作，该动作由一个传奇处理。 saga 完成后，它会分派一个由 reducer 处理的操作，相应地更改 store 中的状态，告诉组件作业已完成。

另外，我通常有第三个动作，它被 catch 块中的 saga 使用，以防出现错误，因此组件会收到通知并可以向用户显示消息（或采取任何其他适当的出错时采取措施）。

Answer 2

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

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

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

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

Return 从 saga 到 React 组件的值

Return value from saga to react component

reactjs

redux-saga

react-redux