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