Redux - 가벼운 프로젝트

Doodream·2021년 12월 5일
0

Redux

목록 보기
2/4
post-thumbnail

간단한 리덕스 프로젝트

아무폴더나 만들고 그안에 아무 js파일을 생성합니다.
그리고 해당폴더 안에

npm init -y
명령어로 프로젝트를 생성합니다.
npm install redux
명령어를 이용해서 redux 관련 node module을 설치합니다.
리덕스 라이브러리를 불러온후

가장 먼저 리덕스의 중앙 store를 만듭니다.

그리고 reducer 함수를 생성합니다.

redux reducer 함수

리듀서는 몇가지 조건이 필요합니다.

먼저 순수함수여야 합니다.

이 함수안에서 같은 입력으로 인해서 무조건 같은 결과물이 나오는 함수여야하며 이외의 다른 기능이 일어나서는 안됩니다.

인수로서 oldState, dispatch Action 이 들어오고 이를 통해 새로운 state 스냅샷(새로운 상태)를 반환해야합니다.

순수함수 여야하기 때문에 http 통신을 한다던가 로컬스토리지에 데이터를 조작하는 것을 한다던가 하는 방식은 순수함수가 아니게 되므로 (해당 데이터들이 변하면 같은 조작인데도 불구하고 다른 결과를 내놓을수 있기 때문에) reducer에는 이러한 조작들이 들어가면 안됩니다.

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 값이 들어가는데 actiondispatch 에 들어가는 인수이다.

action의 타입에 따라 reducer의 작동방식이 다르게 reducer 함수를 짜면 이를 구독하는 redux store는 이러한 상태를 변경하고 저장한다.

그렇다면 이 redux를 실제로 구독하는 함수에서 어떻게 store 데이터에 접근 하냐면store.getState()라는 함수로 state에 접근할수 있습니다.

따라서 위 코드를 실행시키면 먼저 store가 생성되고 counterReducer를 인수로 받으면서 처음 리듀서 함수가 실행됩니다. 그리고 구독하는 함수에서 lastestState 에서 store.getState()로 구독을 하고 store에서 subscribe 함수로 counterReducer가 현재 구독을 하고 있는 컴포넌트라는 것을 store에 알립니다.

이후 store.dispatch로 스토어의 변경을 유발시키면 이를 구독하고 있는 counterSubscibe 함수가 실행됩니다.

profile
일상을 기록하는 삶을 사는 개발자 ✒️ #front_end 💻

0개의 댓글