Redux ๋ฏธ๋ฆฌ๋ณด๊ธฐ

Status
Done
Study Date
Nov 3, 2023
Tags
์ƒํƒœ ๊ด€๋ฆฌ
  • Redux ๋ž€?
    • โ‡’ action์„ ์‚ฌ์šฉํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•œ ํŒจํ„ด ๋ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
 
  • ์‚ฌ์šฉ ์˜ˆ์‹œ ๋ฐ ์„ค๋ช…
//๋ฆฌ๋“€์„œ : state ๋ณต์‚ฌ๋ณธ์„ ๊ฐ ์•ก์…˜์— ๋”ฐ๋ผ ์กฐ์ž‘ํ•ด์„œ ์ƒˆ๋กœ์šด state ๋ฐ˜ํ™˜ //cf) setState: ํ˜„์žฌ state๋ฅผ ๋ณ€๊ฒฝ, getState: ํ˜„์žฌ state๋ฅผ ๋ฐ˜ํ™˜ const reducer = (state=[], action) => { switch(action.type) { case "ADD_TODO": //์ƒํƒœ๋ฅผ ์–ด๋–ป๊ฒŒ ์กฐ์ž‘ํ• ๊นŒ๋ฅผ ์ •์˜ return [...state, action.text] //์ƒˆ ์ƒํƒœ๋ฅผ ๋ฐ˜ํ™˜ => store์˜ ์ƒํƒœ๊ฐ€ ์ด๊ฑธ๋กœ ๋ฐ”๋€œ default: return state } } const store = createStore(reducer, initialState) //์ด์ œ ์Šคํ† ์–ด๋Š” set/getState๋ฅผ ๊ฐ€์ง store.dispatch({ type: "ADD_TODO", text: "๊ณผ์ œ ํ•˜๊ธฐ" }) // ์ƒํƒœ๋ฅผ setStateํ•˜๋Š” ๊ฒƒ /* const increment = () => { //์ผ๋ฐ˜์ ์œผ๋กœ ์•ก์…˜ ์ƒ์„ฑ์ž ์‚ฌ์šฉ return { type: 'counter/increment' } } store.dispatch(increment()) */ store.getState() // ํ˜„์žฌ ์ƒํƒœ const handleChange() { } store.subscribe(handleChange) //์•ก์…˜์ด dispatch๋  ๋•Œ๋งˆ๋‹ค ํ•ด๋‹น ๋ฆฌ์Šค๋„ˆ๊ฐ€ ์‹คํ–‰๋จ