Как связать действия в редуксе

Question

Из исследований я вижу, что thunk - это инструмент, который вы используете, чтобы иметь возможность связывать действия вместе и / или иметь дело с обратными вызовами, асинхронными действиями и побочными эффектами.

У меня проблемыпонимание руководства thunk middleware .Они постоянно ссылаются на «store.dispatch» (как и большинство учебных пособий по redux), но я никогда не вызываю dispatch и никогда не имею доступа к store, поэтому я не уверен, как реализовать все, что они предлагают.(Я предполагаю, что это потому, что я использую mapDispatchToProps в реагировать .... что не является опцией в моих файлах создателей действий)

Ниже представлен мой создатель действий (часть кода удалена для ясности):

import { CREATE_NEW_SAMPLING_EVENT } from '../Constants/ActionTypes';
import { emptySamplingEvent } from '../Constants/SamplingEvent';
import _ from 'lodash';
import uuidv4 from 'uuid';

export function createNewSamplingEvent(eventName) {
    let newEvent = _.cloneDeep(emptySamplingEvent);
    newEvent.eventID = uuidv4();
    newEvent.eventName = eventName;
    newEvent.dateModified = new Date();

    //TODO: call an optional callback 
    //TODO: dispatch eventLinkTable event

    return { type: CREATE_NEW_SAMPLING_EVENT, event: newEvent }
}

То, что я хотел бы сделать, перечислено в 'todo's.

У меня есть другое действие, называемое EVENT_LINK_TABLE в другом файле создателя действия и другом редукторе, которое бы взяло uuid от этого создателя действияв качестве аргумента.Я хотел бы отправить это действие EVENT_LINK_TABLE (с помощью uuid), как только я закончу делать это новое событие.

Далее, я хотел бы вызвать стандартный обратный вызов (который на самом деле будет отправлятьдругое действие - LOAD_SAMPLNG_EVENT) .. но я не уверен, как вызвать обратный вызов и вернуть действие.Я также слышу, что делать это от создателя действия - это плохая практика, и я не хочу, чтобы это произошло, если в процессе создания произойдет сбой.

Чтобы добавить дополнительную информацию, я отправляю действие в код реагирования: \

handleBrandNewButtonClick = () => {
    this.props.createNewSamplingEvent(this.state.newSamplingEventName);
}

Этот компонент подключен следующим образом:

const mapStateToProps = function (state) {
    return {
        samplingEvents: state.SamplingEvents, //to get list of sampling events to check for uniqueness for that user
    }
}

const mapDispatchToProps = {
    createNewSamplingEvent,
}

export default withRouter(
    withStyles(styles, { withTheme: true })
        (connect(mapStateToProps, mapDispatchToProps)
            (NewEventForm)
        )
);

Answer 1

Вы можете запустить бизнес-логику внутри функции и dispatch самого действия. Создатель действия setNewsCreator создает POJO. Затем этот POJO dispatch редактируется как действие, которое получает редуктор

.

// action creator
const setNewsCreator = ({ news }) => ({ type: 'SET_NEWS', news })

const fetchNews = () => async dispatch => { 
    const response = await getNews()
    dispatch(setNewsCreator({ news: response }))
}

и его использование в компоненте

componentDidMount() {
    this.props.fetchNews() // assuming you've added this function to your mapDispatchToProps
}

Извиняюсь за мой первый комментарий. Оглядываясь назад, я неправильно объяснял действия.

Answer 2

Похоже, вы не обладаете достаточными знаниями в редуксе. Я расскажу вам, как работает магазин Redux. Тогда вы сможете понять излишний.

В редуксе у нас есть пять вещей,

Создатель действий, Экшен, Диспетчер, Редукторы, Магазин

Представь, что ты подумал открыть страховую компанию. Итак, у нас есть наш первый клиент. Он пришел в компанию и спросил: «Эй, мне нужно открыть новый счет».

Теперь сотрудник стойки регистрации скажет: «Хорошо, заполните эту форму и передайте ее мне». Как только он передал форму сотруднику стойки регистрации, он может уйти.

1. В редуксе этот человек известен как Создатель Действия
2. Сама форма известна как объект, возвращаемый создателем действия
3. Сотрудник стойки регистрации, известный как Диспетчер

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

1. Эти отделы известны как редукторы

Теперь каждый отдел будет проверять, что это за форма. Или речь идет об открытии нового аккаунта. Хорошо, бухгалтерия получит сумму денег и добавит ее в хранилище компании. Также отдел политики создаст новую учетную запись для клиента. Но отдел претензий не будет заботиться об этой форме, потому что речь идет не о претензии. Вот почему мы устанавливаем свойство type для объекта.

Создатели действий должны возвращать только простые объекты . Например, если в создателе действия есть асинхронный вызов, он не возвращает простой объект, поэтому нам нужно иметь промежуточное программное обеспечение, чтобы избежать этой проблемы. Здесь мы имеем избыточный толчок. Это промежуточное ПО поможет нам вручную выполнить процесс отправки.

Итак, мы получаем диспетчера в качестве параметра создателю действия. Затем, как только мы получим результаты асинхронного процесса, теперь мы можем отправить результаты вручную внутри этого создателя действия. Этот избыточный поток действует как промежуточное ПО между диспетчером и редукторами.