이재만박사
2023. 3. 2. 15:03
1. Reducer 생성
- 파라미터로 state, action 받음
- state는 현재 state 값을 받음
- action은 객체, 첫 번째 키는 type으로 지정
const reducer = (state, action) => {
if(state === undefined) {
return { color: 'skyblue' };
}
let newState = null;
if(action.type == 'change') {
Object.assign({}, state, {color: action.color});
}
return newState;
}
2. Store 생성
- 생성할 때 인자로 reducer 넘겨서 연결
- store 안에 state 자동 생성
const store = Redux.createStore(reducer);
3. Render 함수를 store에 subscribe 함
store.subscribe(render);
4. dispatch( ) 함수를 호출하면 reducer가 호출되어 직접 실행 후 state 값 변경
store.dispatch({type: 'change', color: 'green'});
5. getState() 로 변경된 값을 얻어와서 화면 업데이트
const render = () => {
const state = store.getState();
UpdateColor(state.color);
}