freeCodeCamp/guide/russian/redux/redux-thunk/index.md

75 lines
3.2 KiB
Markdown
Raw Normal View History

2018-10-12 20:00:59 +00:00
---
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)
2018-10-12 20:00:59 +00:00
* [Redux Middleware](https://redux.js.org/advanced/middleware)
### источники
1. [Пример счетчика приращений, приведенный в документации Redux Thunk, 10/02/2018](#https://github.com/reduxjs/redux-thunk)