TIL_20.05.29(금) - redux

react에 이어 redux에 대한 공부를 진행하였다.

Redux 공식문서에서 도움을 진짜 많이 받았다.

redux의 3가지 원칙은,

1. 하나의 스토어 안에 하나의 객체 트리 구조로 저장 된다.
2. 상태는 읽기 전용이다.
3. 변화는 순수 함수로 작성되어야한다.

redux의 장점은,
애플리케이션을 특정 상태로 한 번에 전환하는 것이 가능하다.
어떠한 컴포넌트도 어떤 상태든 접근이 가능하다.
Serialize 후 서버 등으로 전송하기 쉽다.
상태의 이력(history)를 관리하기에 용이하다.
상태와 UI를 분리해서 테스트할 수 있다.

장점을 코딩하면서 엄청나게 느끼진 못하였고, 음... 한번에 관리해서 좋다...? 정도의 느낌을 받았던것 같다

다음!

액션은 무언가 일어난다는 사실을 기술하나, 그 결과 애플리케이션의 상태가 어떻게 바뀌는 지 특정하지 않는다. 리듀서가 할 일이다.

• 초기값(initial state)이 있고,
• 새로운 상태 객체를 리턴하고,
• 기존 상태 객체는 변경하지 않는다. 즉, Immutable하게 동작한다!

특징
Side-effect가 없는 순수함수(항상 Immutable하게 작동하는 순수 함수이며, 새 상태를 반환합니다.)
기존 state를 직접 변경하지 않는 점

function todoApp(state = initialState, action) {
  switch (action.type) {
  case SET_VISIBILITY_FILTER:
    return Object.assign({}, state, {
      visibilityFilter: action.filter
    });
  default:
    return state
  }
}

Object.assign()을 톤해 복사본을 만들어서 state를 변경하지 않았음

리듀서의 결과가 합쳐져 하나의 상태 트리를 만든다!!

음... 어떻게 어떻게 하나하나가 어떤 기능을 하는 지는 이해 됐는데 구조가 아직 이해가지 않는다. 너무 구현에만 급급했던 것 같고...