Dva: ์–ด๋–ป๊ฒŒ yield put() in effects๊ฐ€ non-blocking ํ”„๋กœ์„ธ์Šค์ธ์ง€, ์–ด๋–ป๊ฒŒ ์ฐจ๋‹จํ•˜๊ณ  ํšจ๊ณผ์—์„œ ๋‹ค๋ฅธ effect๋ฅผ ํ˜ธ์ถœํ•˜๋Š”์ง€ ๋ฌผ์–ด๋ด๋„ ๋ ๊นŒ์š”?

์— ๋งŒ๋“  2017๋…„ 09์›” 12์ผ  ยท  12์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dvajs/dva

๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•˜๋Š” ์ฝ”๋“œ: (์žฌํ˜„ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ ๋˜๋Š” ๋‹จ๊ณ„๋ฅผ ์ œ๊ณตํ•˜์„ธ์š”.)

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘: (์˜ˆ์ƒ๋˜๋Š” ์ •์ƒ์ ์ธ ํšจ๊ณผ)

์‹ค์ œ ํ–‰๋™: (์‹ค์ œ ํšจ๊ณผ)

์‚ฌ์šฉ๋œ ํŒจํ‚ค์ง€ ๋ฒ„์ „: (๋ฌธ์ œ๊ฐ€ ๋˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฒ„์ „)

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

put.resolve()๊ฐ€ ์ฐจ๋‹จ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

yield put.resolve({ type: 'addDelay', payload: { amount: 2 } });
const count = yield select(state => state.count);
yield put({ type: 'addDelay', payload: { amount: count, delay: 0 } });

put.resolve()๊ฐ€ ์ฐจ๋‹จ ์ค‘์ž…๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ redux-saga API๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.

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

dva@2 ๋Š” ํ•ด๋‹น ์˜ˆ์ œ๋ฅผ ์ œ๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค. https://github.com/sorrycc/blog/issues/48

yield put({ type: 'addDelay', payload: { amount: 2 } });
yield take('addDelay/@<strong i="8">@end</strong>');
const count = yield select(state => state.count);
yield put({ type: 'addDelay', payload: { amount: count, delay: 0 } });

https://github.com/redux-saga/redux-saga/issues/744
์—ฌ๊ธฐ์—์„œ ์†”๋ฃจ์…˜์„ ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋‹น์‹ ์„ ๋ถ€๋ฅด๋Š” ํšจ๊ณผ๋ฅผ ์ฐจ๋‹จํ•˜๊ธฐ ์œ„ํ•ด ์ง์ ‘ ํ˜ธ์ถœ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ dva์—๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฆ‰ dva์— ์žˆ๋Š” ํšจ๊ณผ ๋ฉ”์„œ๋“œ๋Š” ๋ชจ๋ธ์— ์ž‘์„ฑ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ˜ธ์ถœํ•˜๋ ค๋Š” ํšจ๊ณผ ๋ฉ”์„œ๋“œ๋ฅผ ์–ด๋–ป๊ฒŒ ์–ป์Šต๋‹ˆ๊นŒ? ์Šค์Šค๋กœ ์ƒ๊ฐํ•˜๊ณ  ์–ป์„ ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. model.method์—์„œ ๋Œ€์ƒ์„ ๊ฐ€์ ธ์˜จ ๋‹ค์Œ call์„ ์‚ฌ์šฉํ•˜์—ฌ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

@nihgwu

effect ๅ‰ๅŽไผš้ขๅค–่งฆๅ‘ /@<strong i="6">@start</strong> ๅ’Œ /@<strong i="7">@end</strong> ็š„ action๏ผŒ

์ด ์ฝ”๋“œ๋Š” saga์— ์บก์Šํ™”๋˜์–ด ์žˆ์Šต๋‹ˆ๊นŒ? ? dva์˜ ์†Œ์Šค ์ฝ”๋“œ์—์„œ ๋ณผ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ด ์†Œ์Šค ์ฝ”๋“œ์˜ ์ฃผ์†Œ๋ฅผ ์•Œ๋ ค์ฃผ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

@hopperhuang dva-core

@hopperhuang dva ์˜ ํšจ๊ณผ๋Š” ๋ชจ๋ธ์— ์ž‘์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์ด ๊ท€์ฐฎ์•„์„œ ์–ด๋–ป๊ฒŒ ๊บผ๋‚ด์•ผ ํ• ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. @nihgwu ๋‹˜ ์˜ ๋ฐฉ๋ฒ•์„ ์ฝ์–ด๋ณด๋‹ˆ ๊ทธ๊ฒŒ ์ •๋‹ต์ด๋ผ๊ณ  ์ƒ๊ฐํ•ด์„œ ๋จผ์ € ์ „ํ™”๋ฅผ ๊ฑธ๊ณ  ๋ฐ”๋กœ ์ ‘์ˆ˜๋ฅผ ์ฐจ๋‹จํ•ฉ๋‹ˆ๋‹ค.

๋ฒ„์ „์„ ๊ธฐ๋กํ•ด ๋‘์‹ญ์‹œ์˜ค. ์ œ์•ˆ๋œ ์†”๋ฃจ์…˜์ด dva2,0์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋Š”์ง€ ์•„๋‹ˆ๋ฉด saga๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. dva1.0์˜ ์†Œ์Šค ์ฝ”๋“œ์—๋Š” put์ด ํ˜ธ์ถœ๋˜๊ธฐ ์ „๊ณผ ํ›„์˜ ์ด๋ฒคํŠธ๊ฐ€ ์บก์Šํ™”๋˜์–ด ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.๋Œ€๋ จ์— ์š”์ฒญํ•˜์—ฌ ์ž์‹ ์˜ ๋ฒ„์ „์ด ์ด ์†”๋ฃจ์…˜์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

------์›๋ณธ ๋ฉ”์‹œ์ง€-----
๋ณด๋‚ธ ์‚ฌ๋žŒ: "pingsoli" [email protected]
๋ณด๋‚ธ ๋‚ ์งœ: 2017/ 9/ 12 22:24
๋ฐ›๋Š” ์‚ฌ๋žŒ: "dvajs/dva" [email protected]
CC: "hopperhuang" [email protected] ; "๋ฉ˜์…˜" [email protected]
Topic: Re: [dvajs/dva] Excuse me. Yield put() in effects๋Š” non-blocking process์ž…๋‹ˆ๋‹ค. Effects์—์„œ ๋‹ค๋ฅธ effect๋ฅผ ์ฐจ๋‹จํ•˜๊ณ  ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ๋ฒ•(#1212)

@hopperhuang dva ์˜ ํšจ๊ณผ๋Š” ๋ชจ๋ธ์— ์ž‘์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์ด ๊ท€์ฐฎ์•„์„œ ์–ด๋–ป๊ฒŒ ๊บผ๋‚ด์•ผ ํ• ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. @nihgwu ๋‹˜ ์˜ ๋ฐฉ๋ฒ•์„ ์ฝ์–ด๋ณด๋‹ˆ ๊ทธ๊ฒŒ ์ •๋‹ต์ด๋ผ๊ณ  ์ƒ๊ฐํ•ด์„œ ๋จผ์ € ์ „ํ™”๋ฅผ ๊ฑธ๊ณ  ๋ฐ”๋กœ ์ ‘์ˆ˜๋ฅผ ์ฐจ๋‹จํ•ฉ๋‹ˆ๋‹ค.
โ€”
๋‹น์‹ ์ด ์–ธ๊ธ‰๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๊ฒƒ์„ ๋ฐ›๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์ด ์ด๋ฉ”์ผ์— ์ง์ ‘ ๋‹ต์žฅํ•˜๊ฑฐ๋‚˜ GitHub์—์„œ ๋ณด๊ฑฐ๋‚˜ ์Šค๋ ˆ๋“œ๋ฅผ ์Œ์†Œ๊ฑฐํ•˜์„ธ์š”.

ํ’‹์„ ์ฐจ๋‹จํ•˜๋ ค๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?์—ฌ๊ธฐ์— ์ ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

ํ’‹์„ ์ฐจ๋‹จํ•˜๋ ค๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?์—ฌ๊ธฐ์— ์ ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

put์˜ ์ž‘์—…์ด saga(dva์˜ ํšจ๊ณผ)์— ์˜ํ•ด ์ฒ˜๋ฆฌ๋˜๋ฉด yield put์ด ๋ฐ˜ํ™˜๋  ๋•Œ ํ•ด๋‹น saga/ํšจ๊ณผ๊ฐ€ ์•„์ง ์‹คํ–‰๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค(redux-saga ์Šค์ผ€์ค„๋Ÿฌ๊ฐ€ ๋Œ€๊ธฐ์—ด์— ์ถ”๊ฐ€ํ•˜๊ณ  ๋‚˜์ค‘์— ์ ์ง„์ ์œผ๋กœ ์ผ์ •์„ ๊ณ„ํšํ•จ) , ์ด๋Š” ์ถฉ์กฑ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ผ๋ถ€ ์ƒํƒœ ํ”„๋กœ์„ธ์Šค์˜ ์ฐจ๋‹จ ์š”๊ตฌ ์‚ฌํ•ญ.

๋‚ด ๊ธฐ์–ต์ด ๋งž๋‹ค๋ฉด, put ์•ก์…˜์€ ์ด ๋ฌธ์ œ ์—†์ด ๋ฆฌ๋“€์„œ์— ์˜ํ•ด ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด yield put์ด ๋ฐ˜ํ™˜๋  ๋•Œ ํ•ด๋‹น ๋ฆฌ๋“€์„œ๋Š” ์ด๋ฏธ ์‹คํ–‰๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ๋“ค์€ ์‹ค์ œ๋กœ redux-saga์˜ ์˜ˆ๋ฐฉ์ฑ…์ด์ง€๋งŒ dva์—์„œ ํšจ๊ณผ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ์‹์—์„œ ์ œ๋„ˆ๋ ˆ์ดํ„ฐ ๊ธฐ๋Šฅ์€ ํšจ๊ณผ๋กœ ์‚ฌ์šฉ๋˜๋ฉฐ put ์•ก์…˜์— ์˜ํ•ด ํŠธ๋ฆฌ๊ฑฐ๋ฉ๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ์•ก์…˜์„ ์ง์ ‘ ์ฒ˜๋ฆฌํ•˜์ง€ ์•Š์ง€๋งŒ ๋‹ค๋ฅธ ์‚ฌ๊ฐ€/์ƒ์„ฑ๊ธฐ ํ•จ์ˆ˜์— ์˜ํ•ด ํ˜ธ์ถœ๋˜๋Š” ์ƒ์„ฑ๊ธฐ ํ•จ์ˆ˜๊ฐ€ ๋งŽ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚ด ๊ฐœ์ธ์ ์ธ ์ ‘๊ทผ ๋ฐฉ์‹์€ redux-saga๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•  ๋•Œ ์“ฐ๊ธฐ ๋ฐฉ์‹์œผ๋กœ ๋ณต์›ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.์•ก์…˜์— ์ง์ ‘ ์‘๋‹ตํ•˜๋Š” ์ƒ์„ฑ๊ธฐ ๊ธฐ๋Šฅ๋งŒ dva ํšจ๊ณผ์— ๋„ฃ๊ณ  ๋‚˜๋จธ์ง€๋Š” ๋ชจ๋‘ ๋ฌด๋ฃŒ์ž…๋‹ˆ๋‹ค.

const model = {
  // ...

  effects: {
    * showItem({ payload }, { call }) {

      // ็”จ๏ผš
      yield call(showItemFirstStageProcedure)
      yield call(showItemSecondStageProcedure)

      // ่€Œไธๆ˜ฏ๏ผš
      // yield put({ type: 'showItemFirstStage' })
      // yield take('showItemFirstStage/@<strong i="7">@end</strong>')
      // yield put({ type: 'showItemSecondStage' })
      // yield take('showItemSecondStage/@<strong i="8">@end</strong>')
      // ...after second stage
    },

    // ...
    // end effects
  },

  // ...
  // end model
}

๋ฌด๋ฃŒ ์ƒ์„ฑ๊ธฐ ํ•จ์ˆ˜์— call / select /... saga๊ฐ€ ํ•„์š”ํ•  ๋•Œ saga์—์„œ ์ง์ ‘ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import { effects } from 'dva/saga'

const { call, select } = effects

๊ทธ๋Ÿฌ๋‚˜ dva๊ฐ€ ํ•ด๋‹น ํšจ๊ณผ์˜ ๋ฉ”์„œ๋“œ์— ๋Œ€ํ•ด ์ œ๊ณตํ•œ put ๋ฐ take ๋Š” ํ•œ ๋ฒˆ ์บก์Šํ™”๋˜๊ณ (์ฆ‰, ๋„ค์ž„์ŠคํŽ˜์ด์Šค ์ ‘๋‘์‚ฌ ์ฒ˜๋ฆฌ) ํšจ๊ณผ ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ์ „๋‹ฌ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
https://github.com/dvajs/dva/blob/master/packages/dva-core/src/getSaga.js#L141

return { ...sagaEffects, put, take };

๋˜๋Š” ์ „์ฒด ์ž‘์—… ์œ ํ˜•์„ ์ž‘์„ฑํ•˜์‹ญ์‹œ์˜ค.

import { effects } from 'dva/saga'

const { take } = effects

// then
take(`${namespace}/${actionType}`)

put.resolve()๊ฐ€ ์ฐจ๋‹จ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

yield put.resolve({ type: 'addDelay', payload: { amount: 2 } });
const count = yield select(state => state.count);
yield put({ type: 'addDelay', payload: { amount: count, delay: 0 } });

put.resolve()๊ฐ€ ์ฐจ๋‹จ ์ค‘์ž…๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ redux-saga API๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.

๋„ฃ๊ธฐ๋ฅผ ์ฐจ๋‹จํ•˜๋ ค๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?์—ฌ๊ธฐ์—์„œ ์ ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

put์˜ ์ž‘์—…์ด saga(dva์˜ ํšจ๊ณผ)์— ์˜ํ•ด ์ฒ˜๋ฆฌ๋˜๋ฉด yield put์ด ๋ฐ˜ํ™˜๋  ๋•Œ ํ•ด๋‹น saga/ํšจ๊ณผ๊ฐ€ ์•„์ง ์‹คํ–‰๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค(redux-saga ์Šค์ผ€์ค„๋Ÿฌ๊ฐ€ ๋Œ€๊ธฐ์—ด์— ์ถ”๊ฐ€ํ•˜๊ณ  ๋‚˜์ค‘์— ์ ์ง„์ ์œผ๋กœ ์ผ์ •์„ ๊ณ„ํšํ•จ) , ์ด๋Š” ์ถฉ์กฑ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ผ๋ถ€ ์ƒํƒœ ํ”„๋กœ์„ธ์Šค์˜ ์ฐจ๋‹จ ์š”๊ตฌ ์‚ฌํ•ญ.

๋‚ด ๊ธฐ์–ต์ด ๋งž๋‹ค๋ฉด, put ์•ก์…˜์€ ์ด ๋ฌธ์ œ ์—†์ด ๋ฆฌ๋“€์„œ์— ์˜ํ•ด ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด yield put์ด ๋ฐ˜ํ™˜๋  ๋•Œ ํ•ด๋‹น ๋ฆฌ๋“€์„œ๋Š” ์ด๋ฏธ ์‹คํ–‰๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

์˜ˆ, yield put(reducers)์€ ๋™๊ธฐ์‹์ด๊ณ  yield put(effects)์€ ๋น„๋™๊ธฐ์‹์œผ๋กœ ์‹œ๋„ํ–ˆ์Šต๋‹ˆ๋‹ค.

์™œ ์ง์ ‘ ๋„ฃ์„ ์ˆ˜ ์—†๊ณ , ํ’‹์„ ์–‘๋ณดํ•ด์•ผ ํ•˜๋‚˜์š”???

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