Возвращаемое значение из саги для реагирования компонента

Question

Я новичок в ReactJS. Все еще оборачиваюсь вокруг всех слоев с помощью магазина редуксов, саг и т. Д. Я пытаюсь вернуть простое логическое значение из саги (которая в данный момент возвращается правильно) в реагирующий компонент.

Вот что у меня есть:

На компоненте контейнера у меня есть это:

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

Я получаю следующую ошибку и не совсем понимаю, почему :-( Тип «Действие» нельзя назначить типу «логический».

Любая помощь будет оценена.

UPDATE

Хорошо, после ввода мне удалось приблизиться на 1 шаг, но пока нет.

Я добавил это в редуктор для управления состоянием

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)

Поскольку вы использовали TypeScript для определения kpiPercentageShow как bool в интерфейсе IKpaPickerConnectedDispatch.

Более того, вы пытаетесь получить ценность от своего действия напрямую, что невозможно. Проверьте ваш поток, значение boolean не должно исходить из ваших действий. Он должен быть доступен вам в mapStateToProps после того, как вы обновили свой магазин с помощью редуктора.

Answer 2

По завершению саги вы должны выполнить еще одно действие, действие, которое соответствующий редуктор ловит, с вашим логическим значением.

Вы можете иметь 2 действия:

ЗАПРОС: обрабатывается сагой (вы уже это делаете). REQUEST_HANDLED: отправляется сагой, обрабатывается редуктором.

В вашей саге:

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

В вашем редукторе:

case REQUEST_HANDLED: return {... state, someFlag: someValue};

Это пример того, что вы могли бы сделать. Поскольку я точно не знаю, почему вы хотите вернуть логическое значение и вернуть взамен response.json ().

Паттерн, который я часто использую с redux-сагой, - это действие, отправляемое компонентом, которое обрабатывается сагой. Когда сага завершена, она отправляет действие, которое обрабатывается редуктором, который соответствующим образом изменяет состояние в хранилище, сообщая компоненту, что работа выполнена.

Кроме того, у меня обычно есть 3-е действие, которое используется сагой в блоке catch в случае ошибки, поэтому компонент информируется и может отображать сообщение для пользователя (или предпринимать любые другие соответствующие действия для ошибка).