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

我得到以下错误，并不太明白为什么:-(类型'动作'不能分配给'boolean'类型。

任何帮助，将不胜感激。

UPDATE

输入后确定我已经设法靠近了一步，但还没有。

我在减压器中添加了这个用于状态管理

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_HANDLED：由传奇人员调度，由减速器处理。

在你的传奇：

yield put（{type：REQEUEST_HANDLED，result：true | false}）;

在你的减速机：

case REQUEST_HANDLED：return {... state，someFlag：someValue};

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

我经常与redux-saga一起使用的模式有一个由一个组件调度的动作，由一个传奇处理。当传奇完成后，它会调度一个由reducer处理的动作，该动作会相应地改变存储中的状态，告诉组件完成了工作。

此外，我通常有一个第3个动作，它在catch块中由saga使用，以防出现错误，因此组件被通知并可以向用户显示消息（或者在出错时采取任何其他适当的操作）。

Answer 2

看起来您的错误来自以下行：

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

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

而且，你试图直接从你的行动中获得价值，这是不可能的。检查你的流量，boolean值不应该来自你的行为。在您使用减速器更新商店后，mapStateToProps应该可以使用它。