О Redux Async без промежуточного программного обеспечения (redux-thunk, redux-saga ...) - PullRequest
Новая
       21

О Redux Async без промежуточного программного обеспечения (redux-thunk, redux-saga ...)

0 голосов
/ 17 ноября 2018

Некоторые действия имеют асинхронную функцию, такую ​​как fetch. Но я не хочу использовать промежуточное ПО, такое как redux-thunk или redux-saga. Поэтому я не решаюсь использовать этот код. 

/* actions */

...

export const fetchRequest = ({category, query, dispatch}) => ({
    type: actionTypes.FETCH_REQUEST,
    promise:
        fetch(`${API_URL}${category}?${query}`, {headers: headers})
        .then(response => response.json())
        .then(data => dispatch(fetchRecieve(data))),
})

export const fetchRecieve = data => ({
    type: actionTypes.FETCH_RECIEVE,
    data,
})

...

/* In x.jsx */
...

const mapDispatchToProps = dispatch => ({
onClick: (category, query) => dispatch(fetchRequest({category, query, dispatch}))
})

...

Этот код нарушен для парадигмы Redux?

Ответы [ 2 ]

0 голосов
/ 18 ноября 2018

Вполне нормально ввести dispatch в создателя действий и использовать его для того, что вам нужно.

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

Ваше решение в некотором роде является «ярлыком» по сравнению с «redux-thunk-way», где ваш thunk сначала проходит через промежуточное ПО, а затем управление будет немедленно инвертировано избыточным-thunk. С помощью redux-thunk вы также можете получить инъекцию getState, кроме dispatch, что дает вам прямой доступ ко всему магазину (без redux-thunk вам придется прибегнуть к mergeProps в вашем компоненте, чтобы иметь доступ как к хранилищу, так и к отправке одновременно).

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

0 голосов
/ 17 ноября 2018

Redux FAQ "Как я могу представить" побочные эффекты ", такие как AJAX-вызовы? ..

Как правило, Redux предполагает, что код с побочными эффектами должен быть частью процесса создания действия. Хотя эта логика может быть выполнена внутри компонента пользовательского интерфейса, обычно имеет смысл извлечь эту логику в повторно используемую функцию, чтобы одну и ту же логику можно было вызывать из нескольких мест - иными словами, функции создателя действия.

Функции, которые вы опубликовали, являются создателями действий, поэтому, кажется, это правильное место для их размещения, однако в следующем параграфе они говорят:

Самый простой и распространенный способ сделать это - добавить промежуточное ПО Redux Thunk, которое позволяет вам создавать создателей действий с более сложной и асинхронной логикой. Еще одним широко используемым методом является Redux Saga, который позволяет вам писать более синхронно выглядящий код с помощью генераторов и может действовать как «фоновые потоки» или «демоны» в приложении Redux. Еще одним подходом является Redux Loop, который инвертирует процесс, позволяя вашим редукторам объявлять побочные эффекты в ответ на изменения состояния и выполнять их отдельно. Помимо этого, существует множество других разработанных сообществом библиотек и идей, каждая из которых имеет свой собственный подход к управлению побочными эффектами.

Есть ли какая-то причина, по которой вы против использования redux-thunk, redux-saga, redux-loop и т. Д.? Все они существуют, чтобы действительно помочь вам. Вы можете сделать побочные эффекты вручную, но это менее сложно, чем использование промежуточного программного обеспечения для этого IMO.

...