[React] Redux 란

리덕스는 사용률이 가장 높은 상태관리 라이브러리다.

리덕스를 사용하면 컴포넌트의 상태 관련 로직들을 다른 파일들로 분리 시켜서 효율적으로 관리 할 수가 있다.

또한 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다.

 

Redux의 3가지 원칙

1. Single source of truth

• 동일한 데이터는 항상 같은 곳에서 가지고 온다.
• 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미다.

2. State is read-only

• 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
• 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.

3. Changes are made with pure functions

• 변경은 순수함수로만 가능하다.
• 리듀서와 연관되는 개념이다.
• Store(스토어) - Action(액션) - Reducer(리듀서)

 

Store, Action, Redcer의 의미와 특징

 

Store

Store는 상태가 관리되는 '오직 하나의' 공간이다.

• 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.
• 여러개의 스토어를 사용 할 수 있지만 하나의 사용만 권장한다.
• 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.

Action

Action은 앱에서 스토어에 운반할 데이터를 말한다.

Action은 자바스크립트 객체 형식으로 되어있다.

{
	type : 'CHANGE' , //필수
    content : { // 옵션
    	name : 'red',
        color : 'red'
    }
}

Action Creator

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

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

// 화살표 함수로도 가능
const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

subscribe

구독은 스토어의 내장함수 중 하나다. subscribe 함수는 함수 형태의 값을 파라미터로 받아온다.

subscribe 함수에 특정 함수를 전달해주면 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출된다.

Reducer

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

Action을 Store에 바로 전달하는 것이 아니다.

Action을 Reducer에 전달해야한다.

Reducer 가 주문을 보고 Store의 상태를 업데이트 하는 것이다.

Action을 Reducer에 전달하기 위해서는 dispatch() 메소드를 사용해야한다.

 

Action 객체가 dispatch() 메소드에 전달 -> dispatch를 통해 Reducer를 호출 -> Reducer는 새로운 Store 생성

 

Redux의 상태 관리 도식화

출처: 생활코딩 Redux 강의