redux-thunk

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 17,679 Open GitHub ↗

Redux를 위한 Thunk middleware

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Redux Thunk
Redux용 Thunk [middleware](https://redux.js.org/tutorials/fundamentals/part-4-store#middleware)입니다. Redux 스토어의 `dispatch` 및 `getState` 메서드와 상호 작용할 수 있는 로직이 포함된 함수를 작성할 수 있게 해줍니다.
전체 사용법과 유용한 패턴에 대해서는 [Redux 문서의 \*\*Writing Logic with Thunks\*\* 페이지](https://redux.js.org/usage/writing-logic-thunks)를 참고하세요.
![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/reduxjs/redux-thunk/test.yml?branch=master)
[![npm version](https://img.shields.io/npm/v/redux-thunk.svg?style=flat-square)](https://www.npmjs.com/package/redux-thunk)
[![npm downloads](https://img.shields.io/npm/dm/redux-thunk.svg?style=flat-square)](https://www.npmjs.com/package/redux-thunk)
## 설치 및 설정
### Redux Toolkit
권장되는 [공식 Redux Toolkit 패키지](https://redux-toolkit.js.org)를 사용하는 경우, 별도로 설치할 필요가 없습니다. RTK의 `configureStore` API에는 기본적으로 thunk 미들웨어가 이미 추가되어 있습니다:
```js
import { configureStore } from '@reduxjs/toolkit'
import todosReducer from './features/todos/todosSlice'
import filtersReducer from './features/filters/filtersSlice'
const store = configureStore({
reducer: {
todos: todosReducer,
filters: filtersReducer,
},
})
// Thunk 미들웨어가 자동으로 추가되었습니다.
```
### 수동 설정
기본 Redux `createStore` API를 사용하고 있어 수동으로 설정해야 하는 경우, 먼저 `redux-thunk` 패키지를 추가하세요:
```sh
npm install redux-thunk
yarn add redux-thunk
```
Thunk 미들웨어는 named export로 제공됩니다.
**자세한 정보: Thunk 미들웨어 가져오기**
ES 모듈을 사용하는 경우:
```js
import { thunk } from 'redux-thunk'
```
CommonJS 환경에서 Redux Thunk를 사용하는 경우:
```js
const { thunk } = require('redux-thunk')
```
그런 다음, Redux Thunk를 활성화하려면
[`applyMiddleware()`](https://redux.js.org/api/applymiddleware)를 사용하세요:
```js
import { createStore, applyMiddleware } from 'redux'
import { thunk } from 'redux-thunk'
import rootReducer from './reducers/index'
const store = createStore(rootReducer, applyMiddleware(thunk))
```
### 커스텀 인수 주입하기
2.1.0 버전부터 Redux Thunk는 thunk 미들웨어에 커스텀 인수를 주입하는 기능을 지원합니다. 이는 테스트 시 목(mock) 서비스로 교체할 수 있는 API 서비스 레이어를 사용할 때 특히 유용합니다.
Redux Toolkit의 경우, `configureStore` 내부의 `getDefaultMiddleware` 콜백을 통해 커스텀 `extraArgument`를 전달할 수 있습니다:
```js
import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducer'
import { myCustomApiService } from './api'
const store = configureStore({
reducer: rootReducer,
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
thunk: {
extraArgument: myCustomApiService,
},
}),
})
// 나중에 사용 시
function fetchUser(id) {
// `extraArgument`는 thunk 함수의 세 번째 인자입니다.
return (dispatch, getState, api) => {
// 여기서 api를 사용할 수 있습니다.
}
}
```
여러 개의 값을 전달해야 하는 경우, 하나의 객체로 결합하세요:
```js
const store = configureStore({
reducer: rootReducer,
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
thunk: {
extraArgument: {
api: myCustomApiService,
otherValue: 42,
},
},
}),
})
// 나중에 사용 시
function fetchUser(id) {
return (dispatch, getState, { api, otherValue }) => {
// 여기서 api 및 기타 항목들을 사용할 수 있습니다.
}
}
```
스토어를 직접 수동으로 설정하는 경우, 올바른 thunk 미들웨어를 생성하기 위해 named export인 `withExtraArgument()` 함수를 사용해야 합니다:
```js
const store = createStore(reducer, applyMiddleware(withExtraArgument(api)))
```
## 왜 이 기능이 필요한가요?
기본적인 순수 Redux 스토어에서는 액션을 디스패치하는 단순한 동기식 업데이트만 수행할 수 있습니다. 미들웨어는 스토어의 기능을 확장하여, 스토어와 상호 작용하는 비동기 로직을 작성할 수 있도록 해줍니다.
Thunk는 스토어에 접근해야 하는 복잡한 동기식 로직과 AJAX 요청 같은 단순한 비동기 로직을 포함하여, 기본적인 Redux 사이드 에펙트(side effects) 로직에 권장되는 미들웨어입니다.
자세한 내용은

thunk가 유용한 이유에 대해서는 다음을 참고하세요:
- \*\*Redux docs: Writing Logic with Thunks\*\*
https://redux.js.org/usage/writing-logic-thunks
thunk에 대한 공식 사용 guide 페이지입니다. thunk가 존재하는 이유, thunk middleware가 동작하는 방식, thunk 사용을 위한 유용한 패턴들을 다룹니다.
- \*\*Stack Overflow: Dispatching Redux Actions with a Timeout\*\*
http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559
Dan Abramov가 점진적인 접근 방식(인라인 비동기 호출, 비동기 action creator, thunk middleware)을 단계별로 살펴보며 Redux에서 비동기 동작을 관리하는 기초를 설명합니다.
- \*\*Stack Overflow: Why do we need middleware for async flow in Redux?\*\*
http://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594
Dan Abramov가 thunk 및 비동기 middleware를 사용하는 이유와 thunk를 사용하는 몇 가지 유용한 패턴을 제시합니다.
- \*\*What the heck is a "thunk"?\*\*
https://daveceddia.com/what-is-a-thunk/
일반적으로 그리고 Redux의 맥락에서 "thunk"라는 단어가 의미하는 바에 대한 빠른 설명입니다.
- \*\*Thunks in Redux: The Basics\*\*
https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60
thunk가 무엇이고, 어떤 문제를 해결하며, 어떻게 사용하는지 자세히 살펴봅니다.
또한 다음의
\*\*[Redux FAQ entry on choosing which async middleware to use](https://redux.js.org/faq/actions#what-async-middleware-should-i-use-how-do-you-decide-between-thunks-sagas-observables-or-something-else)\*\*도 읽어보는 것이 좋습니다.
thunk middleware가 Redux 코어 라이브러리에 직접 포함되어 있지는 않지만,
\*\*[`@reduxjs/toolkit` package](https://github.com/reduxjs/redux-toolkit)\*\*에서 기본적으로 사용됩니다.

## Motivation
Redux Thunk [middleware](https://redux.js.org/tutorials/fundamentals/part-4-store#middleware)를 사용하면 action 대신 함수를 반환하는 action creator를 작성할 수 있습니다.
thunk는 action의 dispatch를 지연시키거나 특정 조건이 충족될 때만 dispatch하는 데 사용할 수 있습니다. 내부 함수는 store 메서드인 `dispatch`와 `getState`를 매개변수로 받습니다.

비동기 dispatch를 수행하기 위해 함수를 반환하는 action creator:
```js
const INCREMENT\_COUNTER = 'INCREMENT\_COUNTER'
function increment() {
return {
type: INCREMENT\_COUNTER,
}
}
function incrementAsync() {
return dispatch => {
setTimeout(() => {
// Yay! `dispatch`를 사용하여 동기 또는 비동기 action을 호출할 수 있습니다.
dispatch(increment())
}, 1000)
}
}
```

조건부 dispatch를 수행하기 위해 함수를 반환하는 action creator:
```js
function incrementIfOdd() {
return (dispatch, getState) => {
const { counter } = getState()
if (counter % 2 === 0) {
return
}
dispatch(increment())
}
}
```

## What’s a thunk?!
[Thunk](https://en.wikipedia.org/wiki/Thunk)는 평가(evaluation)를 지연시키기 위해 표현식을 감싸는 함수입니다.
```js
// 1 + 2의 계산이 즉시 수행됩니다.
// x === 3
let x = 1 + 2
// 1 + 2의 계산이 지연됩니다.
// foo는 나중에 호출되어 계산을 수행할 수 있습니다.
// foo는 thunk입니다!
let foo = () => 1 + 2
```
이 용어는 "think"의 유머러스한 과거형 버전으로 [시작되었습니다](https://en.wikipedia.org/wiki/Thunk#cite\_note-1).

## Composition
내부 함수의 모든 반환 값은 `dispatch` 자체의 반환 값으로 사용할 수 있습니다. 이는 thunk action creator들이 서로를 dispatch하고 Promise를 반환하여 서로의 완료를 기다리게 함으로써 비동기 제어 흐름을 오케스트레이션하는 데 매우 편리합니다.
```js
import { createStore, applyMiddleware } from 'redux'
import { thunk } from 'redux-thunk'
import rootReducer from './reducers'
// 참고: 이 API는 redux@>=3.1.0이 필요합니다.
const store = createStore(rootReducer, applyMiddleware(thunk))
function fetchSecretSauce() {
return fetch('https://www.google.com/search?q=secret+sauce')
}
// 이것들은 지금까지 보아온 일반적인 action creator들입니다.
// 이들이 반환하는 action은 middleware 없이도 dispatch될 수 있습니다.
// 하지만 이것들은 "비동기 흐름"이 아닌 "사실(fact)"만 표현할 뿐입니다.
function makeASandwich(forPerson, secretSauce) {
retur

```javascript
n {
type: 'MAKE_SANDWICH',
forPerson,
secretSauce,
}
}
function apologize(fromPerson, toPerson, error) {
return {
type: 'APOLOGIZE',
fromPerson,
toPerson,
error,
}
}
function withdrawMoney(amount) {
return {
type: 'WITHDRAW',
amount,
}
}
// 미들웨어가 없어도 액션을 디스패치할 수 있습니다:
store.dispatch(withdrawMoney(100))
// 하지만 API 호출이나 라우터 전환 같은 비동기 액션을 시작해야 할 때는 어떻게 해야 할까요?
// Thunk를 만나보세요.
// 이 문맥에서 thunk는 비동기 작업을 수행하기 위해 디스패치될 수 있는 함수이며, 액션을 디스패치하고 상태를 읽을 수 있습니다.
// 다음은 thunk를 반환하는 액션 생성자입니다:
function makeASandwichWithSecretSauce(forPerson) {
// 여기서 함수("thunk")를 반환함으로써 제어권을 역전시킬 수 있습니다.
// 이 함수가 `dispatch`로 전달되면, thunk 미들웨어가 이를 가로채서 `dispatch`와 `getState`를 인자로 전달하여 호출합니다.
// 이를 통해 thunk 함수는 일부 로직을 실행하면서도 여전히 스토어와 상호작용할 수 있는 능력을 갖추게 됩니다.
return function (dispatch) {
return fetchSecretSauce().then(
sauce => dispatch(makeASandwich(forPerson, sauce)),
error => dispatch(apologize('The Sandwich Shop', forPerson, error)),
)
}
}
// Thunk 미들웨어를 사용하면 마치 일반 액션인 것처럼
// thunk 비동기 액션을 디스패치할 수 있습니다!
store.dispatch(makeASandwichWithSecretSauce('Me'))
// 심지어 디스패치로부터 thunk의 반환값도 처리해주므로,
// Promise를 반환하기만 하면 체이닝을 할 수 있습니다.
store.dispatch(makeASandwichWithSecretSauce('My partner')).then(() => {
console.log('Done!')
})
// 실제로 다른 액션 생성자에서 액션과 비동기 액션을
// 디스패치하는 액션 생성자를 작성할 수 있으며,
// Promise로 제어 흐름을 구축할 수 있습니다.
function makeSandwichesForEverybody() {
return function (dispatch, getState) {
if (!getState().sandwiches.isShopOpen) {
// Promise를 꼭 반환할 필요는 없지만, 호출자가 비동기 디스패치 결과에 대해
// 항상 .then()을 호출할 수 있도록 하는 유용한 관례입니다.
return Promise.resolve()
}
// 일반 객체 액션과 다른 thunk를 모두 디스패치할 수 있으므로,
// 단일 흐름에서 비동기 액션들을 조합할 수 있습니다.
return dispatch(makeASandwichWithSecretSauce('My Grandma'))
.then(() =>
Promise.all([
dispatch(makeASandwichWithSecretSauce('Me')),
dispatch(makeASandwichWithSecretSauce('My wife')),
]),
)
.then(() => dispatch(makeASandwichWithSecretSauce('Our kids')))
.then(() =>
dispatch(
getState().myMoney > 42
? withdrawMoney(42)
: apologize('Me', 'The Sandwich Shop'),
),
)
}
}
// 이는 서버 사이드 렌더링에 매우 유용합니다. 데이터가 준비될 때까지
// 기다린 다음 앱을 동기적으로 렌더링할 수 있기 때문입니다.
store
.dispatch(makeSandwichesForEverybody())
.then(() =>
response.send(ReactDOMServer.renderToString()),
)
// 또한 누락된 데이터를 로드하기 위해 props가 변경될 때마다
// 컴포넌트에서 thunk 비동기 액션을 디스패치할 수도 있습니다.
import { connect } from 'react-redux'
import { Component } from 'react'
class SandwichShop extends Component {
componentDidMount() {
this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson))
}
componentDidUpdate(prevProps) {
if (prevProps.forPerson !== this.props.forPerson) {
this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson))
}
}
render() {
return
```

```
{this.props.sandwiches.join('mustard')}

}
}
export default connect(state => ({
sandwiches: state.sandwiches,
}))(SandwichShop)
```
## License
MIT

redux-thunk

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README