74 lines
3.2 KiB
Markdown
74 lines
3.2 KiB
Markdown
|
---
|
|||
|
title: Redux Thunk
|
|||
|
localeTitle: Redux Thunk
|
|||
|
---
|
|||
|
## Redux Thunk
|
|||
|
|
|||
|
Redux Thunk - это промежуточное программное обеспечение, которое позволяет вам возвращать функции, а не только действия, в Redux 1 . Это позволяет откладывать действия, в том числе работать с обещаниями.
|
|||
|
|
|||
|
Причина, по которой мы используем это промежуточное программное обеспечение, заключается в том, что не все действия, которые мы выполняем, будут синхронными, а некоторые связаны несинхронными, например, с помощью axios для отправки запроса на получение. Это займет немного времени, и простое сокращение не принимает во внимание это поведение. Итак, Redux-thunk приходит на помощь, позволяя нам асинхронно отправлять действия, чтобы мы могли разрешить эти обещания.
|
|||
|
|
|||
|
Пример 1:
|
|||
|
|
|||
|
```javascript
|
|||
|
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:
|
|||
|
|
|||
|
```javascript
|
|||
|
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()` :
|
|||
|
|
|||
|
```javascript
|
|||
|
import { createStore, applyMiddleware } from 'redux';
|
|||
|
import thunk from 'redux-thunk';
|
|||
|
import rootReducer from './reducers/index';
|
|||
|
|
|||
|
const store = createStore(
|
|||
|
rootReducer,
|
|||
|
applyMiddleware(thunk)
|
|||
|
);
|
|||
|
```
|
|||
|
|
|||
|
### Рекомендации
|
|||
|
|
|||
|
* [Redux Thunk Github Repo](https://github.com/reduxjs/redux-thunk)
|
|||
|
* [Redux Middleware](https://redux.js.org/advanced/middleware)
|
|||
|
|
|||
|
### источники
|
|||
|
|
|||
|
1. [Пример счетчика приращений, приведенный в документации Redux Thunk, 10/02/2018](#https://github.com/reduxjs/redux-thunk)
|