3.2 KiB
| title | localeTitle |
|---|---|
| Redux Thunk | Redux Thunk |
Redux Thunk
Redux Thunk - это промежуточное программное обеспечение, которое позволяет вам возвращать функции, а не только действия, в Redux 1 . Это позволяет откладывать действия, в том числе работать с обещаниями.
Причина, по которой мы используем это промежуточное программное обеспечение, заключается в том, что не все действия, которые мы выполняем, будут синхронными, а некоторые связаны несинхронными, например, с помощью axios для отправки запроса на получение. Это займет немного времени, и простое сокращение не принимает во внимание это поведение. Итак, Redux-thunk приходит на помощь, позволяя нам асинхронно отправлять действия, чтобы мы могли разрешить эти обещания.
Пример 1:
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
function increment() {
return {
type: INCREMENT_COUNTER
};
}
function incrementAsync() {
return dispatch => {
setTimeout(() => {
// Yay! Can invoke sync or async actions with `dispatch`
dispatch(increment());
}, 1000);
};
}
Пример 2:
const GET_CURRENT_USER = 'GET_CURRENT_USER';
const GET_CURRENT_USER_SUCCESS = 'GET_CURRENT_USER_SUCCESS';
const GET_CURRENT_USER_FAILURE = 'GET_CURRENT_USER_FAILURE';
const getUser = () => {
return (dispatch) => { //nameless functions
// Initial action dispatched
dispatch({ type: GET_CURRENT_USER });
// Return promise with success and failure actions
return axios.get('/api/auth/user').then(
user => dispatch({ type: GET_CURRENT_USER_SUCCESS, user }),
err => dispatch({ type: GET_CURRENT_USER_FAILURE, err })
);
};
};
Установка и настройка
Redux Thunk может быть установлен с использованием npm install redux-thunk --save или yarn add redux-thunk с командной строкой. Поскольку это инструмент Redux, вам также необходимо настроить Redux. После установки он активируется с помощью applyMiddleware() :
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);