아무폴더나 만들고 그안에 아무 js파일을 생성합니다.
그리고 해당폴더 안에
npm init -y
명령어로 프로젝트를 생성합니다.
npm install redux
명령어를 이용해서 redux 관련 node module을 설치합니다.
리덕스 라이브러리를 불러온후
가장 먼저 리덕스의 중앙 store를 만듭니다.
그리고 reducer 함수를 생성합니다.
리듀서는 몇가지 조건이 필요합니다.
이 함수안에서 같은 입력으로 인해서 무조건 같은 결과물이 나오는 함수여야하며 이외의 다른 기능이 일어나서는 안됩니다.
oldState
, dispatch Action
이 들어오고 이를 통해 새로운 state 스냅샷(새로운 상태)
를 반환해야합니다.순수함수 여야하기 때문에 http 통신을 한다던가 로컬스토리지에 데이터를 조작하는 것을 한다던가 하는 방식은 순수함수가 아니게 되므로 (해당 데이터들이 변하면 같은 조작인데도 불구하고 다른 결과를 내놓을수 있기 때문에) reducer에는 이러한 조작들이 들어가면 안됩니다.
const redux = require("redux");
const initialState = {
counter: 0,
};
const counterReducer = (state = initialState, action) => {
if (action.type === "increment") {
return {
counter: state.counter + 1,
};
}
if (action.type === "decrement") {
return {
counter: state.counter - 1,
};
}
return state;
};
const store = redux.createStore(counterReducer);
const counterSubscriber = () => {
const lastestState = store.getState();
console.log(lastestState);
};
store.subscribe(counterSubscriber);
store.dispatch({ type: "increment" });
store.dispatch({ type: "decrement" });
위 코드를 보면 redux.createStore()
이라는 함수로 store
를 생성하는데 인수로 reducer
함수를 넣는다 reducer
함수에는 초기값을 기본값으로 하는 state
, action
값이 들어가는데 action
은 dispatch
에 들어가는 인수이다.
action
의 타입에 따라 reducer
의 작동방식이 다르게 reducer
함수를 짜면 이를 구독하는 redux store
는 이러한 상태를 변경하고 저장한다.
그렇다면 이 redux
를 실제로 구독하는 함수에서 어떻게 store
데이터에 접근 하냐면store.getState()
라는 함수로 state에 접근할수 있습니다.
따라서 위 코드를 실행시키면 먼저 store
가 생성되고 counterReducer
를 인수로 받으면서 처음 리듀서 함수가 실행됩니다. 그리고 구독하는 함수에서 lastestState
에서 store.getState()
로 구독을 하고 store
에서 subscribe
함수로 counterReducer
가 현재 구독을 하고 있는 컴포넌트라는 것을 store
에 알립니다.
이후 store.dispatch
로 스토어의 변경을 유발시키면 이를 구독하고 있는 counterSubscibe
함수가 실행됩니다.