如何通过 redux-saga 将数据从 redux-form 传递到组件中？

Question

我想弄清楚 redux-form 如何与 redux-saga 一起工作。

预期流量：

我在selectbox里面有一个redux-form，里面有两个选项。选择一个选项将触发 API 请求数据调用。 handleOptionSaga 将处理此数据并将其显示在容器中。

实际流量：

我select一个选项后，数据没有在容器内部传递。

这是我的代码；

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

欢迎来到 Stack Overflow！

如何通过 redux-saga 将数据从 redux-form 传递到组件中？

How can I pass data from redux-form via redux-saga into a component?

reactjs

redux

react-redux

redux-form

redux-saga

预期流量：

实际流量：