[React] Redux


기본 개념

Action

어플리케이션의 store, 즉 저장소로 data를 보내는 방법입니다. view에서 정의되어 있는 액션을 호출하면 action creators(액션 생성자)는 어플리케이션의 state를 변경해 줍니다.

const ADD_TODO = "ADD_TODO"; // action의 type을 정의

정의된 action type은 action creators를 통해 사용됩니다.

function addTodo(text) {
  return {
    type: ADD_TODO,
    text,
  };
}


Reduces

action을 통해 어떠한 행동을 정의했다면, 그 결과 어플리케이션의 상태가 어떻게 바뀌는지 특정하는 함수, 항상 순수 함수여야 한다.

function todoApp(state = initState, action) {
  switch (action.type) {
    case SET_VISIBELITY_FILTER:
      return Object.assing({}, state, {
        visible: action.filter,
      });
    default:
      return state;
  }
}

리듀서 함수에서는 action의 type에 따라 변화된 state를 반환


Store

무엇이 일어날지를 나타내는 action, 그리고 action에 따라 상태를 수정하는 reducer를 저장하는 어플리케이션에 있는 단하나의 객체입니다. reducer에 의해서만 변경이

언제 Redux를 사용할까?

  1. 리덕스를 사용한 개발 스타일이 너무 마음에 들 때
  2. 미들웨어
  3. 서버사이드 렌더링
  4. 더쉬운 테스팅
  5. 컴포넌트가 아닌 고셍서 글로벌 상태를 사용하거나 업데이트를 해야 할 때

Redux의 세 가지 규칙

  • 스토어는 단 한개
  • state는 읽기 전용
  • 변화는 순수 함수로 구성