TIL.46 Redux 1

Haiin·2021년 1월 17일

출저

Redux공식문서

Redux

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.

Redux란 위의 Redux 공식문서의 설명과 같이 개별적으로 상태관리를 해주는 라이브러리다. 나는 React를 쓰면서 접하게 되었는데 자바스크립트 기반의 라이브러리이므로 다른 라이브러리와 함께 쓰이기도 한다.

왜 필요하지?

React에도 state를 통해 상태를 바꿔줄 수 있다. 하지만, 여러 컴포넌트에서 전역적으로 상태(state)를 바꿔주고 부모 자식 컴포넌트가 아니어도 그 바뀐 상태를 사용해야 할 경우도 생긴다. 또한 비동기로 상태를 처리해야 할 때 그 history를 tracking 하기 용이하기 때문에 사용하기도 한다.

예측가능한

중앙화된

디버깅이 쉬운

유연한

Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다.

Redux flow

store

데이터 객체 묶음이라고 생각하면 된다. 규모가 클 경우, 카테고리별로 분류한다.

action

store에 대해 뭔가 하고 싶은 경우엔 action 을 발행한다. 구체적으로 dispatch()를 통해 action을 불러오는데 그러면 reducer에서 본격적으로 state를 바꾸는 작업을 하게된다.
action은 기본적으로 아래와 같은 포맷을 갖고 있는 객체가 된다.

//action
const logIn = (data) => {
  return {
    type: "LOG_IN",
    data,
  };
};

reducer

이전 상태와 action을 합쳐, 새로운 state를 만든다. 여기에서 불변성을 볼 수 있는데 원래 상태를 보존하고 업데이트 되는 상태를 확인할 수 있는 부분이다. ...prevState 를 사용하는 것을 보면 이전 상태에서 바뀐 상태를 더해주는 방식이다.

const reducer = (prevState, action) => {
  //새로운 state 만들어주기
  switch (action.type) {
    case "LOG_IN":
      return {
        ...prevState,
        user: action.data,
      };
    default:
      return prevState;
  }
};

실제 적용

//초기값 설정
const initialState = {
  user: null,
  posts: [],
};
//store 만들어주고
const store = createStore(reducer, initialState);
//초기값(바뀌기전의 상태)확인
console.log("1st", store.getState());
//본격적으로 dispatch() 을 통해서 상태를 바꿔준다.
store.dispatch(
  logIn({
    id: 1,
    name: "haiin",
    dmin: true,
  })
);
console.log("2nd", store.getState());
//