Redux(리덕스)란?

Redux(리덕스)란?

리덕스란 자바스크립트 상태관리 라이브러리이다.

우선 리덕스는 리액트 내부에 있는 기술이 아니며 순수 HTML, JAVASCRIPT 내에서도 사용이 가능하다.

컴포넌트에 집중된 리액트와 시너지가 좋으니 대체적으로 리액트에 리덕스를 사용할 뿐이다.

 

Redux의 기본 개념 : 세 가지 원칙

Single source of truth

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

State is read-only

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

Changes are made with pure functions

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

 

 

 

---

Store, Action, Reducer의 의미와 특징

Action (액션)

0️⃣ Action(액션)은 앱에서 스토어에 운반할 데이터와 행동의 명세서(이름)가 담겨있다.
1️⃣ Action(액션)은 자바스크립트 객체 형식으로 되어있다.

• Simple JavaScript Object

{
    type: "INCREASE",
    
},
// or 
{
    type: 'ADD_TODO', // 필수
    payload: { // 옵션
    todo: '빨래하기',
	}
}

type은 단순히 어떤 동작을 하기 위한 명령을 알아보기 쉽게 지정한 커스텀 이름표이다.

 

예를 들어 나는 INCREASE ( 증가하다 )라고 이름표를 붙인 명령은 값을 하나 증가시키는 명령으로

식별 하겠다고 사용자가 정하는 것이다.

 

Reducer (리듀서)

0️⃣ Action(액션)을 Reducer(리듀서)에 전달해야한다.
1️⃣ Reducer(리듀서)가 액션에서온 이름표를 보고 정해진 명령을 통해 Store(스토어)의 상태를
      업데이트하는 것이다.
2️⃣ Action(액션)을 Reducer(리듀서)에 전달하기 위해서는 dispatch() 메소드를 사용해야한다.

const initialState = {
  todo:"",
  count:0,
}

function reducer(state = initialState, action) {
    switch(action.type) {
        case 'INCREASE':
            return {
            	..state,
                count:count + 1;
            }
        case 'LOG_IN_REQUEST':
            return {
            	..state,
                todo:action.payload.todo;
            }
        default:
            return state;
    }
}

위와 같이 액션에서 붙여논 이름표에따라 case문을 통해 설정된 명령을 실행한다.

 

 

Store (스토어)

Store(스토어)는 상태가 관리되는 오직 하나의 공간이다.

리덕스에서 가장 중요한 객체(인스턴스)이다.

이 안에 현재 상태(state[data])를 가지고 있으며, 액션값을 받은 디스패치함수가 리듀서로 전달한 상태값을

저장하는 곳이다. ( 리액트프로젝트에서 사용하는 state의 중앙 저장소 )

 

---

 

📚참고
https://mjn5027.tistory.com/33
https://hanamon.kr/redux란-리덕스-상태-관리-라이브러리/