Redux - Сага, поставь родительскую функцию - PullRequest
Новая
       1

Redux - Сага, поставь родительскую функцию

4 голосов
/ 10 июня 2019

Есть способ вызвать функцию props (которая передается родительским компонентом, а не в текущем компоненте) в контейнере саги после определенного запроса?

Это мой пример

saga.js 

export function* getItem(options) {
    try {
        const url = `....`;
        const response = yield call(request, url);
        // here setResponse is an action that modify reducer and it's fine
        yield put(setResponse(response));
        // here I want to put a props parents function(something like this), but in sagas I dont't have access to props
        yield put(this.props.parentFunction)
    } catch (e) {
        .....
    }
}

Единственный способ, который я нашел, - это использовать обратный вызов (поэтому я вызываю реквизиты для работы в index.js и существую) или напрямую передаю функцию как getItems опции .

Есть более чистый путь?

Ответы [ 2 ]

0 голосов
/ 16 июня 2019

Предполагая, что parentFunction чисто. Этого можно добиться, передав в качестве аргумента parentProps в дополнение к options.Вот шаблон:

Здесь getItemsAction получает 2 аргумента:

  • опции: некоторые данные
  • parentProps: реквизиты из родительского компонента 
export const function getItemsAction(options, parentProps){
    return ({ type: GET_ITEMS_REQUEST, payload: {options , parentProps} });
}

Предоставляя эти параметры действию, они будут доступны вам в саге (т. Е. Options & parentProps): 

export function* getItemsSaga({ ...payload }) {
    try {
        const url = `....`;
        const response = yield call(request, url);
        // here setResponse is an action that modify reducer and it's fine
        yield put(setResponse(response));
        // here I want to put a props parents function(something like this), but in sagas I dont't have access to props
        yield put(parentProps)
    } catch (e) {
        .....
    }
}

Таким образом parentFunction может храниться в parentProps, идоступ в саге.

0 голосов
/ 11 июня 2019

Я не уверен, что полностью понимаю вашу цель, но я столкнулся с аналогичной проблемой -

Мне нужно запустить эту функцию после завершения саги.

Обычно это презентация или связанные с компонентами (например, скрыть счетчик). Например, Redux-Form принимает обработчик Promise submit. Как мы можем превратить сагу в обещание?

Итак, как вы и предлагали, мы могли бы передать функцию. ИЛИ, мы могли бы пойти в другом направлении - «как мой компонент может подписаться на избыточные события?»

Вы определенно можете взломать что-то вместе, что работает для вашего варианта использования, но я использую redux-saga-thunk для этого. Это позволяет саго-вызывающим вызовам отправки действий возвращать обещание: this.props.runSaga().then(...

В качестве бонуса вы также получаете селекторы «производного состояния», такие как pending(ACTION_NAME), что очень удобно для отображения пользовательского интерфейса загрузки без ручного управления логическими флагами.

...