Redux 깊게 공부하기 #1

Redux

예측 가능한 상태 관리 라이브러리

리액트 뿐 아니라 Javascript, Jquery, Vanilla 등 다양한 곳에서 적용이 가능한다.

Redux가 필요한 이유

리덕스는 Global하게 상태관리를 하게 될 때 효과적이다.
컴포넌트들의 상태 관련 로직들을 각각의 파일들로 분리시켜 더욱 효율적으로 관리 할 수 있다.
또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다.

리액트로 프로젝트를 만들다보면 컴포넌트는 LocalState를 갖게되고, App은 GlobalState를 갖게된다.

리액트로 프로젝트를 만들다보면 컴포넌트는 LocalState를 갖게되고, App은 GlobalState를 갖게된다.

3가지 원칙

첫번째

애플리케이션의 모든 상태는 하나의 스토어 안에 하나의 객체 트리 구조로 저장된다.

두번째

상태는 읽기 전용이다. 상태를 변화시키는 유일한 방법은 액션 객체를 전달하는 방법 뿐이다

세번째

변화는 순수 함수로 작성되어야 한다. 액션에 의해 상태 트리가 어떻게 변화하는지 지정하기 위해 순수 리듀서를 작성해야 한다.

리듀서는 이전 상태와 액션을 받아 다음 상태를 반환하는 순수 함수다.

이전 상태를 변경하는 대신 새로운 상태 객체를 생성해 반환해야 한다는 사실을 기억하자.

리듀서는 함수이기에 호출되는 순서를 정하거나 추가 데이터를 넘길 수 있다.

Action

상태에 어떤 변화가 필요 할 때 발생시키는 자바스크립트 객체이며, 다음과 같은 형식으로 이뤄져 있다.

const ADD_TODO = 'ADD_TODO';

{
    type: ADD_TODO,
    text: 'Build my first Redux App'
}

액션은 애플리케이션에서 스토어로 보내는 데이터 묶음으로, 평범한 자바스크립트 객체이다.
반드시 어떤 형태의 액션이 실행 될 지 나타내는 type 속성을 갖고 있어야 한다.

store.dispatch()를 통해 이들을 보낼 수 있다.

Action Creator

액션 생성함수는 액션을 만드는 함수로, 단순히 파라미터를 받아와서 액션 객체로 만들어 준다.

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

// 화살표 함수로도 만들 수 있습니다.
const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

Reducer

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

리듀서는 변화를 일으키는 함수다. 리듀서는 state,와 action이라는 두가지의 파라미터를 받아온다.
현재의 상태와 전달 받은 액션을 참고해서 새로운 상태를 만들어 반환한다.

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

// 화살표 함수로도 만들 수 있습니다.
const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});