# reduxThunk

## redux-thunk

## Reference

[리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i)](https://velopert.com/3528)

## redux-thunk란

기존에 redux를 사용할 때 api를 요청하게 되면 redux-thunk를 사용했는데 redux-thunk의 정확한 개념은 무엇인지 알고 있지 않았다.\
그래서 이번에 정리를 하게 되었다.

redux-thunk는 한 줄로 정리하면 redux를 사용할 때 비동기 dispatch를 하기 위한 비동기 미들웨어이다.

코드로 예시를 들어보자.

```
export default connect(mapStateToProps, mapDispatchToProps)(Container);  
```

보통 이렇게 컨테이너 마지막에 connect(mapStateToProps, mapDispatchToProps)이렇게 해주고 redux를 사용하게 된다.\
mapStateToProps 같은 경우는 일반 redux와 같이 store에서 가져와서 사용하면 된다.\
그런데 mapDispatchToProps에서 redux-thunk를 사용해 비동기 dispatch를 할 경우에는 일반 redux와 다른 부분이 있다.

```
function mapDispatchToProps(dispatch) {
    return {
        noThunk: (data) => dispatch({type:"example", data}),
    };
} 
```

위는 redux-thunk를 사용하지 않은 일반 redux이다.

```
const mapDispatchToProps = (dispatch) => {
    return {
        withThunk: (data) => dispatch(asyncFunction(data)),
    };
};
const function asyncFunction(data) {
    return (dispatch) => {
        return axios.get(`/${data}`)
        .then((response) => {
            dispatch(asyncFunction2(response));
        }).catch((err) => {
            console.log(err);
        });
    };
}  
```

위는 redux-thunk를 사용한 예시 redux 구조이다.

redux-thunk에서 function이 function을 리턴하는 것을 thunk라고 부른다. 위에서는 asyncFunction이 되겠다.\
위와 같이 코드를 짜면 비동기적으로 redux의 store에 state들을 저장할 수 있게 된다.

react-thunk 공식 문서에 설명이 깔끔하게 잘 되어 있다. 복습이 필요하면 다시 가보자.\
링크 : <https://www.npmjs.com/package/redux-thunk>

#### 유념해야 할 코드

위에서도 설명했지만 예시가 다양할수록 좋으니 공식문서에서 유의깊게 봐야 할 코드를 남겨두고 정리를 마치도록 하겠다.

```
function makeSandwichesForEverybody() {
    //store의 state는 필요한 경우 getState()로사용할 수 있다.
    return function (dispatch, getState) {
        if (!getState().sandwiches.isShopOpen) {
            return Promise.resolve();
        }   
        // 당연하지만, plain action과 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')
        )
        );
    };
}  
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://allover3773.gitbook.io/study/undefined-1/react/reduxthunk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.