Dva: ๊ตฌ๋…์— ๋ช‡ ๊ฐ€์ง€ ์˜ˆ์ œ ๋˜๋Š” ๋ฌธ์„œ๊ฐ€ ์ถ”๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

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

๋ฐ์ดํ„ฐ ์†Œ์Šค๋Š” ํ˜„์žฌ ์‹œ๊ฐ„, ์„œ๋ฒ„์˜ ์›น ์†Œ์ผ“ ์—ฐ๊ฒฐ, ํ‚ค๋ณด๋“œ ์ž…๋ ฅ, ์ง€๋ฆฌ์  ์œ„์น˜ ๋ณ€๊ฒฝ, ํžˆ์Šคํ† ๋ฆฌ ๋ผ์šฐํŒ… ๋ณ€๊ฒฝ ๋“ฑ์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ์„ค์ • ๋ฐ keyEvent์˜ ์ถœ์ฒ˜์™€ websocket ๋˜๋Š” ๋‹ค๋ฅธ ๊ฒฝ์šฐ ์ž‘์„ฑ ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

question

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

์ฐธ์กฐ ์šฉ์œผ๋กœ ์†Œ์ผ“์„ ์‹œ๋„ํ–ˆ์Šต๋‹ˆ๋‹ค.

// model

import * as service from '../services/socket';

subscriptions: {
    socket({dispatch}){ // socket็›ธๅ…ณ
        return service.listen(data => {
            switch (data.type) {
                case 'connect':
                    if (data.state === 'success') {
                        dispatch({
                            type: 'connectSuccess'
                        })
                    } else {
                        dispatch({
                            type: 'connectFail'
                        })
                    }
                    break;
                case 'welcome':
                    dispatch({
                        type: 'welcome'
                    });
                    break;
            }
        })
    }
},

// services

import io from 'socket.io-client';

let socket = '';

export function listen(action) {
    if (socket === '') {
        try {
            socket = io("localhost:3000");
            action({
                type: 'connect',
                state: 'success'
            });
        } catch (err) {
            action({
                type: 'connect',
                state: 'fail'
            });
        }
    }
    socket.on('welcome', () => {
        action({
            type: 'welcome'
        })
    })
}

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

setup ๋ฐ keyEvent๋Š” ์ผ์‹œ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜์—†๋Š” ํ‚ค์ด๋ฉฐ ๋ชจ๋“  ๋ฌธ์ž์—ด์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฆ‰,์ด ํ‚ค๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์—ฌ๊ธฐ์—์„œ ํŠน์ • ์œ ํ˜•์˜ ๊ธฐ๋Šฅ์„ ํ‘œ์‹œํ•˜๋Š” ๋ฐ ๋„์›€์ด๋˜๋Š” ์šฉ๋„๋กœ๋งŒ ์‚ฌ์šฉ๋˜๋ฉฐ, ๋””์ŠคํŒจ์น˜ ๋ฐ ๊ธฐ๋ก ๋งŒ ์ „๋‹ฌ๋˜๋ฉฐ ํŠน์ • ๋ชจ๋‹ˆํ„ฐ๋ง ์ฝ”๋“œ์—๋Š” ๋ชจ๋‹ˆํ„ฐ๋ง์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ํŠน์ • ํƒ€์‚ฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๋‚ด ์ดํ•ด๊ฐ€ ๋งž์Šต๋‹ˆ๊นŒ?

์˜ˆ, ์—ฌ๊ธฐ์—์„œ๋Š” ํ‚ค / ๊ฐ’ ํ˜•์‹์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ๋Š” ์ฃผ๋กœ ์ดํŽ™ํŠธ ๋ฐ ๋ฆฌ๋“€์„œ์™€ ํ˜•์‹์„ ์ผ์น˜์‹œํ‚ค๋Š” ๊ฒƒ์ด ๋ชฉ์ ์ด๋ฉฐ, ์ฐจํ›„ ๊ตฌ๋… ์ทจ์†Œ ๊ธฐ๋Šฅ์ด ์ง€์›๋˜๋ฉฐ ํ‚ค๊ฐ€ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

์ดํ•ดํ•ฉ๋‹ˆ๋‹ค, ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ์œ„ ๋…ผ์˜์˜ ์˜๋ฏธ๋ฅผ์ด ๋ฌธ์„œ์— ์ถ”๊ฐ€ ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ €์™€ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. :)

๊ตฌ๋…์€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตฌ๋… ํ•  ์žฅ์†Œ๋ฅผ ์ •์˜ ํ• ๋ฟ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ๋””์ŠคํŒจ์น˜์™€ ํžˆ์Šคํ† ๋ฆฌ๊ฐ€ ์ „๋‹ฌ๋˜๊ณ  ๊ตฌ๋… ๋˜๋Š” ๋ชจ๋‹ˆํ„ฐ๋ง ๋ฐฉ๋ฒ•์„ ๊ตฌํ˜„ํ•˜๋ ค๋ฉด ํƒ€์‚ฌ ํด๋ž˜์Šค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒŒ ์ดํ•ด์ž…๋‹ˆ๊นŒ? ๋””์ŠคํŒจ์น˜๋Š” redux ์ €์žฅ์†Œ์˜ ๋””์ŠคํŒจ์น˜์ด๊ณ  ํžˆ์Šคํ† ๋ฆฌ๋Š” react-router์˜ ํžˆ์Šคํ† ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์ดํ•ด๋ฉ๋‹ˆ๊นŒ?

@ roc2539 ์˜ˆ.

๊ตฌ๋… ์„ค์ •์—์„œ ์ƒํƒœ ๋˜๋Š” ์†Œํ’ˆ์˜ ์ฝ˜ํ…์ธ ์— ์•ก์„ธ์Šค ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

@gzbigegg ์•„๋‹ˆ์š”, ์ž‘์—…์„ ํŠธ๋ฆฌ๊ฑฐํ•˜๊ณ  ํšจ๊ณผ๊ฐ€ ์ฒ˜๋ฆฌํ•˜๋„๋กํ•ฉ๋‹ˆ๋‹ค.

subscriptions: {
    setup ({ dispatch }) {
      dispatch({ type: 'query' })
    }
}

๋‘ ๊ฐ€์ง€ ์งˆ๋ฌธ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์ด ๋งž๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฌธ์„œ์—๋Š” ๋Š๋ฆ… ๋‚˜๋ฌด๊ฐ€ ๊ทธ๋“ค๊ณผ ์—ฐ๋ฝ ํ•œ ์ ์ด ์—†๋‹ค๊ณ  ๋‚˜์™€ ์žˆ์œผ๋ฉฐ ๊ตฌ๋…์„ ๋งค์šฐ ๋ช…ํ™•ํ•˜๊ฒŒ ์ดํ•ดํ•˜์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.

  1. history๋ฅผ ์ „๋‹ฌํ•˜๊ณ  history.listen์„ ์‹คํ–‰ํ•˜๋ฉด ๊ฒฝ๋กœ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ํŠธ๋ฆฌ๊ฑฐ๋ฉ๋‹ˆ๋‹ค. ์ดํ•ด๊ฐ€ ๋งž๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.
  2. ๋””์ŠคํŒจ์น˜์—์„œ๋งŒ ์ „๋‹ฌ๋˜๋Š” ๊ตฌ๋…์€ ์–ธ์ œ ํŠธ๋ฆฌ๊ฑฐ๋ฉ๋‹ˆ๊นŒ?

websocket๊ณผ ๊ฐ™์€ ๊ตฌ๋… ์˜ˆ์ œ๋ฅผ๋ณด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์„ค์ •์—์„œ ๋‘ ๊ฐ€์ง€ ์ž‘์—…์„ ๋ถ„๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•

@ roc2539 ๊ตฌ๋… ๋“ฑ๋ก์—์„œ ์ฝœ๋ฐฑ์˜ ํƒ€์ด๋ฐ ๋ฐ ์ฃผ์ž… ๋งค๊ฐœ ๋ณ€์ˆ˜์— ๋Œ€ํ•œ ๋ช…ํ™•ํ•œ ๋ฌธ์„œ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๋Œ€๋‹ต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

ํ•ด์‹œ ๊ฒฝ๋กœ๋กœ ๋ณ€๊ฒฝ ํ•œ ํ›„ ์„ค์ •์—์„œ ํ‚ค๋ณด๋“œ์—์„œ ์ž…๋ ฅ ํ•œ URL์˜ ๋ณ€๊ฒฝ์„ ๋ชจ๋‹ˆํ„ฐ๋ง ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ browserHistory๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.

 setup ({ dispatch }) {
      console.log('models-app') // ๆ‰‹ๅŠจๆ”นๅ˜urlๅœฐๅ€๏ผŒไธไผš่ฟ›ๆญคๆ–นๆณ•
      dispatch({ type: 'query' })

    },

์ฐธ์กฐ ์šฉ์œผ๋กœ ์†Œ์ผ“์„ ์‹œ๋„ํ–ˆ์Šต๋‹ˆ๋‹ค.

// model

import * as service from '../services/socket';

subscriptions: {
    socket({dispatch}){ // socket็›ธๅ…ณ
        return service.listen(data => {
            switch (data.type) {
                case 'connect':
                    if (data.state === 'success') {
                        dispatch({
                            type: 'connectSuccess'
                        })
                    } else {
                        dispatch({
                            type: 'connectFail'
                        })
                    }
                    break;
                case 'welcome':
                    dispatch({
                        type: 'welcome'
                    });
                    break;
            }
        })
    }
},

// services

import io from 'socket.io-client';

let socket = '';

export function listen(action) {
    if (socket === '') {
        try {
            socket = io("localhost:3000");
            action({
                type: 'connect',
                state: 'success'
            });
        } catch (err) {
            action({
                type: 'connect',
                state: 'fail'
            });
        }
    }
    socket.on('welcome', () => {
        action({
            type: 'welcome'
        })
    })
}

์ง€์ •๋œ ํ‚ค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ๋…์„ ํŠธ๋ฆฌ๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์œผ๋ ค๊ณ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์›๋ž˜ ์ดˆ๊ธฐํ™”๋˜๋ฉด ๋ชจ๋‘ ํ•œ ๋ฒˆ ์‹คํ–‰๋˜๋ฏ€๋กœ์ด โ€‹โ€‹๊ตฌ๋…์€ ๋””์ŠคํŒจ์น˜ ๋ฐ ํžˆ์Šคํ† ๋ฆฌ ๋งŒ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค ๐Ÿ˜„

๊ตฌ๋… : {
์„ค์ • ({๋””์ŠคํŒจ์น˜}) {
dispatch ({type : 'query'})
}
} ์ด๊ฒƒ์€ ๋””์ŠคํŒจ์น˜ ์ž‘์—…์˜ ์ดˆ๊ธฐ ์‹คํ–‰ ์ผ ๋ฟ์ด๋ฉฐ ์‹ค์ œ๋กœ ๊ตฌ๋… ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค.

๊ฐ‘์ž๊ธฐ ๊นจ๋‹ฌ์Œ

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

๊ด€๋ จ ๋ฌธ์ œ

wm3445 picture wm3445  ยท  3์ฝ”๋ฉ˜ํŠธ

yaeSakuras picture yaeSakuras  ยท  3์ฝ”๋ฉ˜ํŠธ

yunfeit picture yunfeit  ยท  3์ฝ”๋ฉ˜ํŠธ

bjwulin picture bjwulin  ยท  3์ฝ”๋ฉ˜ํŠธ

ljjsimon picture ljjsimon  ยท  3์ฝ”๋ฉ˜ํŠธ