Question

我是ReactJS的新手。仍然用redux-store和sagas等将我的头缠绕在所有图层上。我正在尝试将一个简单的布尔值从传奇（此时传奇正确返回）返回到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

传奇结束后，您应该再执行一次动作，该动作由相关的reducer捕获，并带有您的布尔值。

您可以执行2个操作：

请求：由传奇处理（您已经这样做了）。 REQUEST_HANDLED：由传奇派遣，由减速器处理。

在您的传奇故事中：

收益率put（{type：REQEUEST_HANDLED，result：true | false}）;

在减速器中：

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

这是您可以做什么的一个示例。我不知道为什么要返回布尔值，而是返回response.json（）。

我经常与redux-saga一起使用的模式是由组件调度一个动作，该动作由saga处理。传奇完成后，它会调度一个由reducer处理的动作，该动作会相应地更改商店中的状态，并告诉组件该工作已完成。

此外，我通常会有第三个动作，如果发生错误，则由catch块中的传奇使用，因此会通知组件并可以向用户显示消息（或对用户采取任何其他适当的措施）错误）。

Answer 2

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

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

因为您已经使用TypeScript在kpiPercentageShow的界面中将bool标识为IKpaPickerConnectedDispatch。

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

从传奇返回值以响应组件

2 个答案: