reduxThunk

redux-thunk

Reference

๋ฆฌ๋•์Šค(Redux)๋ฅผ ์™œ ์“ธ๊นŒ? ๊ทธ๋ฆฌ๊ณ  ๋ฆฌ๋•์Šค๋ฅผ ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๋ฐœ์•… (i)

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')
        )
        );
    };
}  

Last updated