REDUX 1

STATE관리 라이브러리.
컴포넌트의 state관련 로직을
따로 저장소(redux store)를 두어
편리하게 호출,사용할 수 있음.

그러나 무조건 redux를 통해 모든 state관련 로직을 처리할 필요는 없음.

depth가 깊어지거나, 필요한 경우에만.

Action

state변화가 필요할 때,
action creator에 의해 생성되는
변화할 내용을 담은 객체.

아래와 같은 형태.

{
  type: "ADD_TODO", //action type은 대문자와 _로 구성하는 관례존재.
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

Action Creator

action 객체를 만드는 함수. 단순 param을 받아, action object return.

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

// 화살표 함수로도 만들 수 있습니다.
const changeInput = text => ({ 
  type: "CHANGE_INPUT",  // 액션 타입을 필수적으로 가져야 함.
  text
});

Reducer

state와 action객체를 받아
반영한 state를 return.
=실제로 변화를 일으키는 함수.

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

Store

어플리케이션 당 1개가 존재.
현재의 app state와, reducer가 존재함.
그 외 내장함수(dispatch, subscribe…)들이 존재.

dispatch

store의 내장함수 중 하나.

액션을 발생시키는 동작을 함.

action creator가 생성한 action을
dispatch(action)과 같이 전달,
store는 reducer함수를 실행시켜
새 상태를 생성.

subscribe

함수를 param으로 받음.

dispatch 동작 시 마다, 전달받은 함수를 실행.

적용 방법은
벨로퍼트님의 블로그에 너무 잘 서술이 되어있어서
다시 옮겨 쓰는 것에 불과할 것 같아 링크로 대체합니다.

Redux (2) 리액트 없이 쓰는 리덕스