Как я могу передать данные из redux-формы через redux-saga в компонент?

Question

Я пытаюсь выяснить, как redux-form работает с redux-saga.

Ожидаемый поток:

У меня есть redux-form внутри selectbox, который включает в себя два варианта,Выбор опции вызовет вызов API для запроса данных.handleOptionSaga обработает эти данные и покажет их в контейнере.

Фактический поток:

Данные не передаются внутри контейнера после выбора параметра.

Вот мой код;

//ACTİONS
import FILTER_ITEMS from './FilterOptions.constants';
export const formFilterRequest = values => ({
    type: FILTER_ITEMS.FORM_FILTER_REQUEST,
    values
});
export const formFilterSuccess = data => ({
    type: FILTER_ITEMS.FORM_FILTER_SUCCESS,
    jsonData: data
});
export const formFilterFail = () => ({
    type: FILTER_ITEMS.FORM_FILTER_FAILURE
});

// REDUCER
const JsonDataReducer = (state : Object = initialState, action : Object) => {
    switch (action.type) {
        case FILTER_ITEMS.FORM_FILTER_REQUEST:
            return {
                ...state
            };
        case FILTER_ITEMS.FORM_FILTER_SUCCESS:
            return {
                ...state,
                jsonData: action.data
            };
        case FILTER_ITEMS.FORM_FILTER_FAILURE:
            return {
                ...state
            };
        default:
            return state;
    }
};

//REDUX SAGA
function* handleOptionSaga({ values }) {
    yield put(startSubmit('optionFilterForm'));
    console.log('values ', values);
    yield delay(2000);

    if (values && values.selectedOption === '1') {
        const { data } = yield call(
            axios.get,
            'https://jsonplaceholder.typicode.com/posts/10'
        );
        if (data) {
            yield put(getOptionActions.formFilterSuccess(data));
        }
    } else if (values && values.selectedOption === '2') {
        const { data } = yield call(
            axios.get,
            'https://jsonplaceholder.typicode.com/posts/20'
        );
        if (data) {
            yield put(getOptionActions.formFilterSuccess(data));
        }
    } else {
        return false;
    }
    yield put(setSubmitSucceeded('optionFilterForm'));
    yield put(stopSubmit('optionFilterForm'));
}

export default function* flightSearchFormSaga() {
    yield takeEvery(FILTER_ITEMS.FORM_FILTER_REQUEST, handleOptionSaga);
    yield takeEvery(FILTER_ITEMS.FORM_FILTER_SUCCESS, handleOptionSaga);
}

Answer 1

В вашем потоке FORM_FILTER_SUCCESS есть что-то странное.

Здесь вы устанавливаете jsonData для хранения данных из вызова API:

export const formFilterSuccess = (data) => ({
  type: FILTER_ITEMS.FORM_FILTER_SUCCESS,
  jsonData:data
});

Но здесь вы пытаетесь получить доступ к action.data вместо action.jsonData:

case FILTER_ITEMS.FORM_FILTER_SUCCESS:
    return {
        ...state,
        jsonData: action.data <--- Try to use action.jsonData here
    };

Добро пожаловать в переполнение стека!