Redux: ๋ฏธ๋“ค์›จ์–ด๋กœ ๋ฐœ์ƒํ•˜๋Š” ๋ฌดํ•œ ์žฌ๊ท€

์— ๋งŒ๋“  2016๋…„ 04์›” 01์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: reduxjs/redux

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

question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋ฌธ์ œ๋Š” ์—ฌ๊ธฐ์— ์žˆ์Šต๋‹ˆ๋‹ค .

const mapDispatchToProps = (dispatch) => {
  return dispatch;
}

mapStateToProps ์ฒ˜๋Ÿผ mapDispatchToProps ๋Š” props๋กœ ๊ฐ์ฒด ๋ฅผ ๋ฐ˜ํ™˜ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

ํ•จ์ˆ˜๋ฅผ ์ œ๊ณตํ•˜๋ฉด connect() ๋Š” ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ธ์Šคํ„ด์Šค ๋ณ„ mapDispatchToProps() (์ธ์Šคํ„ด์Šค ๋ณ„ ๋ฉ”๋ชจ์— ์œ ์šฉํ•จ)

๊ท€ํ•˜์˜ ๊ฒฝ์šฐ์—๋Š” dispatch (ํ•จ์ˆ˜) ๋Œ€์‹  {dispatch} (๊ฐ์ฒด)๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ ค๊ณ ํ–ˆ์Šต๋‹ˆ๋‹ค.

const mapDispatchToProps = (dispatch) => {
  // return dispatch;
  return {dispatch};
}

๊ทธ๋Ÿฌ๋ฉด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฑด ๊ทธ๋ ‡๊ณ , mapDispatchToProps ์ง€์ •ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์ด _์ด ๊ธฐ๋ณธ ๋™์ž‘์ด๋ฏ€๋กœ ์™„์ „ํžˆ ์‚ญ์ œํ•˜๊ณ  connect() ์— ์ „ํ˜€ ์ „๋‹ฌํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

์ด๊ฒŒ ๋„์›€์ด ๋˜๊ธธ ๋ฐ”๋ž€๋‹ค!

๋ชจ๋“  3 ๋Œ“๊ธ€

๋‚˜๋Š” ๊ทธ๋“ค์˜ ์‚ฌ์šฉ ์ˆ˜์ค€์„ ๊ณ ๋ คํ•  ๋•Œ Redux ๋˜๋Š” Redux Thunk์—์„œ ๋ฌธ์ œ๊ฐ€ ๋  ๊ฐ€๋Šฅ์„ฑ์ด ๊ฑฐ์˜ ์—†์œผ๋ฉฐ ์•ฑ ์ฝ”๋“œ์—์„œ ๋ฏธ๋ฌ˜ํ•œ ์‹ค์ˆ˜๊ฐ€ ๋  ๊ฐ€๋Šฅ์„ฑ์ด ํ›จ์”ฌ ๋” ๋†’๋‹ค๊ณ  ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ถœ์ฒ˜๋งŒ์œผ๋กœ๋Š” ์ง„๋‹จํ•˜๊ธฐ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•˜๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ๊ฒŒ์‹œ ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ฌธ์ œ๋Š” ์—ฌ๊ธฐ์— ์žˆ์Šต๋‹ˆ๋‹ค .

const mapDispatchToProps = (dispatch) => {
  return dispatch;
}

mapStateToProps ์ฒ˜๋Ÿผ mapDispatchToProps ๋Š” props๋กœ ๊ฐ์ฒด ๋ฅผ ๋ฐ˜ํ™˜ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

ํ•จ์ˆ˜๋ฅผ ์ œ๊ณตํ•˜๋ฉด connect() ๋Š” ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ธ์Šคํ„ด์Šค ๋ณ„ mapDispatchToProps() (์ธ์Šคํ„ด์Šค ๋ณ„ ๋ฉ”๋ชจ์— ์œ ์šฉํ•จ)

๊ท€ํ•˜์˜ ๊ฒฝ์šฐ์—๋Š” dispatch (ํ•จ์ˆ˜) ๋Œ€์‹  {dispatch} (๊ฐ์ฒด)๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ ค๊ณ ํ–ˆ์Šต๋‹ˆ๋‹ค.

const mapDispatchToProps = (dispatch) => {
  // return dispatch;
  return {dispatch};
}

๊ทธ๋Ÿฌ๋ฉด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฑด ๊ทธ๋ ‡๊ณ , mapDispatchToProps ์ง€์ •ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์ด _์ด ๊ธฐ๋ณธ ๋™์ž‘์ด๋ฏ€๋กœ ์™„์ „ํžˆ ์‚ญ์ œํ•˜๊ณ  connect() ์— ์ „ํ˜€ ์ „๋‹ฌํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

์ด๊ฒŒ ๋„์›€์ด ๋˜๊ธธ ๋ฐ”๋ž€๋‹ค!

์ด์— ๋Œ€ํ•œ ๊ท€ํ•˜์˜ ๋„์›€๊ณผ ๊ท€ํ•˜๊ฐ€ ์ œ๊ณต ํ•œ ์ฒ ์ €ํ•œ ์„ค๋ช…์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰