유데미 강의를 통해 정리한 내용입니다
강의에서 말하길...
Redux is an alternative to the Context API
둘 다 Cross-Component/App-Wide state를 관리하기 좋지만 왜 저렇게 언급했는지,
Context의 단점을 살펴보면서 알아보자!
"Redux는 이 두 단점을 해결한다!!"
// redux 설치하기 npm i redux
// redux 가져오기
const redux = require("redux"); // nodejs 예시
//reducer : state 변경 함수. 첫 실행 시 필요한 default value 필요
// 위 reducer 설명 참고
const exampleReducer = (state = { counter: 0 },action) => {
if (action.type === "increment") {
return {
counter: state.counter + 1
};
} else if (action.type === "decrement") {
return {
counter: state.counter - 1
};
} else {
return state
};
};
//store : redux.createStore(reducer)로 생성. reducer는 store data를 변경할 reducer 넣기
const store = redux.createStore(exampleReducer);
// state : store.getState()
const latestState = store.getState();
// subscribe : store.subscribe(해당 store data(state) 변경 시 실행할 함수)
const exampleSubscriber = () => {
const latestState = store.getState();
console.log(latestState);
};
store.subscribe(exampleSubscriber);
// dipatching action: 인자로 type 키를 가진 객체 필요
store.dispatch({type: "increment"})