Redux์ ํจ๊ป React๋ฅผ ํ์ฉํ๋ ์น ์ฑ์์ ์์
์ค์
๋๋ค. redux-thunk Github์ ๋น์ทํ ๋ฉ์์ง๋ฅผ ๊ฒ์ํ์ง๋ง ์ด๊ฒ์ด Redux ๋ฏธ๋ค์จ์ด์ ์ผ๋ฐ์ ์ธ ๋ฌธ์ ์ผ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ํ์ฌ ์ฌ๊ธฐ์์๋ ์์ ์ ๋งค์ฐ ์ ์ฌํ ๋ฐฉ์์ผ๋ก Redux-Thunk๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
http://redux.js.org/docs/advanced/ExampleRedditAPI.html
๋ด ์ฑ์ ์คํํ ๋ Chrome์ ๋ค์ ์ค๋ฅ๊ฐ ํ์๋ฉ๋๋ค.
Uncaught RangeError: Maximum call stack size exceeded
(anonymous function) @ index.js:10
dispatch @ applyMiddleware.js:44
(anonymous function) @ index.js:12
dispatch @ applyMiddleware.js:44
(anonymous function) @ index.js:12
dispatch @ applyMiddleware.js:44
(anonymous function) @ index.js:12
dispatch @ applyMiddleware.js:44
๋ด ํ๋ก์ ํธ์ ๋ํ ๋งํฌ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
https://github.com/jbri7357/redux-sample-app
๋๋ ๊ทธ๋ค์ ์ฌ์ฉ ์์ค์ ๊ณ ๋ คํ ๋ Redux ๋๋ Redux Thunk์์ ๋ฌธ์ ๊ฐ ๋ ๊ฐ๋ฅ์ฑ์ด ๊ฑฐ์ ์์ผ๋ฉฐ ์ฑ ์ฝ๋์์ ๋ฏธ๋ฌํ ์ค์๊ฐ ๋ ๊ฐ๋ฅ์ฑ์ด ํจ์ฌ ๋ ๋๋ค๊ณ ๋งํ ์ ์์ต๋๋ค.
์ถ์ฒ๋ง์ผ๋ก๋ ์ง๋จํ๊ธฐ๊ฐ ์ด๋ ต์ต๋๋ค. ๋ฌธ์ ๋ฅผ ์ฌํํ๋ ํ๋ก์ ํธ๋ฅผ ๊ฒ์ ํ ์ ์๋ค๋ฉด ๋์์ด ๋ ๊ฒ์ ๋๋ค.
๋ฌธ์ ๋ ์ฌ๊ธฐ์ ์์ต๋๋ค .
const mapDispatchToProps = (dispatch) => {
return dispatch;
}
mapStateToProps
์ฒ๋ผ mapDispatchToProps
๋ props๋ก ๊ฐ์ฒด ๋ฅผ ๋ฐํํด์ผํฉ๋๋ค.
ํจ์๋ฅผ ์ ๊ณตํ๋ฉด connect()
๋ ํด๋น ํจ์๋ฅผ ํธ์ถํ์ฌ ์ธ์คํด์ค ๋ณ mapDispatchToProps()
(์ธ์คํด์ค ๋ณ ๋ฉ๋ชจ์ ์ ์ฉํจ)
๊ทํ์ ๊ฒฝ์ฐ์๋ dispatch
(ํจ์) ๋์ {dispatch}
(๊ฐ์ฒด)๋ฅผ ๋ฐํํ๋ ค๊ณ ํ์ต๋๋ค.
const mapDispatchToProps = (dispatch) => {
// return dispatch;
return {dispatch};
}
๊ทธ๋ฌ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋ฉ๋๋ค. ๊ทธ๊ฑด ๊ทธ๋ ๊ณ , mapDispatchToProps
์ง์ ํ์ง ์์ ๊ฒฝ์ฐ์ด _์ด ๊ธฐ๋ณธ ๋์์ด๋ฏ๋ก ์์ ํ ์ญ์ ํ๊ณ connect()
์ ์ ํ ์ ๋ฌํ์ง ์๋ ๊ฒ์ด ์ข์ต๋๋ค.
์ด๊ฒ ๋์์ด ๋๊ธธ ๋ฐ๋๋ค!
์ด์ ๋ํ ๊ทํ์ ๋์๊ณผ ๊ทํ๊ฐ ์ ๊ณต ํ ์ฒ ์ ํ ์ค๋ช ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค!
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ฌธ์ ๋ ์ฌ๊ธฐ์ ์์ต๋๋ค .
mapStateToProps
์ฒ๋ผmapDispatchToProps
๋ props๋ก ๊ฐ์ฒด ๋ฅผ ๋ฐํํด์ผํฉ๋๋ค.ํจ์๋ฅผ ์ ๊ณตํ๋ฉด
connect()
๋ ํด๋น ํจ์๋ฅผ ํธ์ถํ์ฌ ์ธ์คํด์ค ๋ณmapDispatchToProps()
(์ธ์คํด์ค ๋ณ ๋ฉ๋ชจ์ ์ ์ฉํจ)๊ทํ์ ๊ฒฝ์ฐ์๋
dispatch
(ํจ์) ๋์{dispatch}
(๊ฐ์ฒด)๋ฅผ ๋ฐํํ๋ ค๊ณ ํ์ต๋๋ค.๊ทธ๋ฌ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋ฉ๋๋ค. ๊ทธ๊ฑด ๊ทธ๋ ๊ณ ,
mapDispatchToProps
์ง์ ํ์ง ์์ ๊ฒฝ์ฐ์ด _์ด ๊ธฐ๋ณธ ๋์์ด๋ฏ๋ก ์์ ํ ์ญ์ ํ๊ณconnect()
์ ์ ํ ์ ๋ฌํ์ง ์๋ ๊ฒ์ด ์ข์ต๋๋ค.์ด๊ฒ ๋์์ด ๋๊ธธ ๋ฐ๋๋ค!