ΠΡΡΠΎΡΠ½ΠΈΠΊΠΎΠΌ Π΄Π°Π½Π½ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΅ΠΊΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ²Π΅ΡΠ° ΠΊ Π²Π΅Π±-ΡΠΎΠΊΠ΅ΡΡ, Π²Π²ΠΎΠ΄ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π³Π΅ΠΎΠ»ΠΎΠΊΠ°ΡΠΈΠΈ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΡΡΠΎΡΠΈΠΈ ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΠΈ ΠΈ Ρ. Π.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ½ΡΡΡ, ΠΎΡΠΊΡΠ΄Π° Π±Π΅ΡΡΡΡΡ ΡΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΈ keyEvent, ΠΈ ΠΊΠ°ΠΊ ΠΈΡ Π·Π°ΠΏΠΈΡΠ°ΡΡ, Π΅ΡΠ»ΠΈ Π²Π΅Π±-ΡΠΎΠΊΠ΅Ρ ΠΈΠ»ΠΈ ΡΡΠΎ-ΡΠΎ Π΅ΡΠ΅.
setup ΠΈ keyEvent - ΠΊΠ»ΡΡΠΈ, Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π»ΡΠ±ΠΎΠΉ ΡΡΡΠΎΠΊΠΎΠΉ.
ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΡΡΠΎΡ ΠΊΠ»ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ Π·Π΄Π΅ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠΈΠΏ ΡΡΠ½ΠΊΡΠΈΠΈ. ΠΠ½ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΡ ΠΈ ΠΈΡΡΠΎΡΠΈΡ, Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ ΠΌΠΎΠ½ΠΈΡΠΎΡΠΈΠ½Π³Π° ΡΡΠ΅Π±ΡΠ΅Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π½Π΅ΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠΎΠ½ΠΈΡΠΎΡΠΈΠ½Π³Π°.
Π― ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ?
ΠΠ°, Π·Π΄Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΡΠΌΠ°Ρ "ΠΊΠ»ΡΡ-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅". Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΡΠΌΠ°ΡΠ° Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΈ ΡΠ΅Π΄ΡΠΊΡΠΎΡΠ°ΠΌΠΈ. ΠΠΎΠ·ΠΆΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΎΡΠΌΠ΅Π½Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ ΠΈ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠ»ΡΡ.
Π― ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, ΡΠΏΠ°ΡΠΈΠ±ΠΎ.
ΠΠΎ Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΠΌΠΎΠ³Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΡΠΌΡΡΠ» ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ Ρ ΡΠΎΠΉ ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, ΡΡΠΎ ΠΈ Ρ :)
ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ ΠΏΡΠΎΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ Π½Π° Π΄Π°Π½Π½ΡΠ΅. ΠΠ°ΡΠ΅ΠΌ ΠΎΡΠΏΡΠ°Π²ΠΊΠ° ΠΈ ΠΈΡΡΠΎΡΠΈΡ Π±ΡΠ΄ΡΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π½Ρ. ΠΠ»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΌΠΎΠ½ΠΈΡΠΎΡΠΈΠ½Π³Π° ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΡΠΎΡΠΎΠ½Π½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΊΠ»Π°ΡΡΠΎΠ². ΠΡΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅? Dispatch - ΡΡΠΎ ΠΎΡΠΏΡΠ°Π²ΠΊΠ° Π² Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ redux, Π° ΠΈΡΡΠΎΡΠΈΡ - ΡΡΠΎ ΠΈΡΡΠΎΡΠΈΡ Π² response-router, ΠΏΠΎΠ½ΡΡΠ½ΠΎ?
@ roc2539 ΠΠ°.
ΠΠΎΠ³Ρ Π»ΠΈ Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΠ° Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ Π² ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠ°Ρ ?
@gzbigegg ΠΠ΅Ρ, Π°ΠΊΡΠΈΠ²ΠΈΡΡΠΉΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°ΡΡ Π΅Π³ΠΎ.
subscriptions: {
setup ({ dispatch }) {
dispatch({ type: 'query' })
}
}
ΠΡΡΡ Π΄Π²Π° Π²ΠΎΠΏΡΠΎΡΠ°. ΠΠ΅ Π·Π½Π°Ρ, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π»ΠΈ. Π Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΡΠΊΠ°Π·Π°Π½ΠΎ, ΡΡΠΎ Π²ΡΠ· Π½ΠΈΠΊΠΎΠ³Π΄Π° Ρ Π½ΠΈΠΌΠΈ Π½Π΅ ΠΊΠΎΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠ²Π°Π», ΠΈ Ρ Π½Π΅ ΠΎΡΠ΅Π½Ρ ΡΠ΅ΡΠΊΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ.
Π― Ρ ΠΎΡΠ΅Π» Π±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 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'
})
})
}
Π― ΠΏΡΡΠ°Π»ΡΡ Π²ΡΡΡΠ½ΠΈΡΡ, ΠΊΠ°ΠΊ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΡ Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ ΠΊΠ»ΡΡΠΎΠΌ. ΠΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ Π²ΡΠ΅ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· ΠΏΡΠΈ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠ° ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠ° ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°ΠΊΡΡΡΠΈΠ΅ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΠΈ ΠΈΡΡΠΎΡΠΈΠΈ π
ΠΠΎΠ΄ΠΏΠΈΡΠΊΠΈ: {
setup ({dispatch}) {
ΠΎΡΠΏΡΠ°Π²ΠΊΠ° ({ΡΠΈΠΏ: 'Π·Π°ΠΏΡΠΎΡ'})
}
} ΠΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ, ΠΎΠ½ΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ.
ΠΠ΄ΡΡΠ³ ΠΏΠΎΠ½ΡΠ»
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡΠΎΠ±ΠΎΠ²Π°Π» ΡΠΎΠΊΠ΅Ρ, ΠΏΡΠΎΡΡΠΎ Π΄Π»Ρ ΡΠΏΡΠ°Π²ΠΊΠΈ.