[Redux] 리덕스의 개념을 잡아보자!!

 

리덕스 (Redux) 란?

 

- 리액트에서 가장 많이 사용하는 상태 관리 라이브러리이다. 

 

- 주의해야 할 점은 , react만을 위한 라이브러리는 아니다.

 

- useState와 마찬가지로 변하는 값들을 관리해주는 관리 시스템이다. 

 

- 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적으로 관리가 가능하다.

 

- 컴포넌트끼리 같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 값을 전달, 업데이트 할 수 있다.

 

 

 

Redux flow는 어떻게 될까?

 

1. 하나의 중앙 데이터(state) store을 갖는다. 

 

2. 상태값을 바뀔 때마다 데이터들의 state 값을 수정해줄 reducer 함수를 만든다.

 

3. dispatch를 사용하여 reducer에게 state 값을 수정하라고(action 값을 전달) 요청한다. 

 

4. reducer가 state값을 수정하면 , subscribe를 사용하여 수정된 부분을 UI에 업로드한다.

 

 

---

 

action

 

- 상태에 어떤 변화가 필요하면 발생한다.

 

- 하나의 객체로 표현된다.

 

- tpye 필드를 반드시 가지고 있어야 한다. 왜냐하면 reducer 함수가 이 type필드 값과 이전  state를 참고하여 새로운 state를 만들기 때문이다. 

 

 

[예제]

 

{
	type : 'ADD_TODO'
}

 

 

action 생성 함수 

 

- 액션 객체를 만들어 주는 함수이다. 액션을 반환한다.

 

- 어떠한 변화를 일으켜야 할 때마다 액션객체를 만들어야 하는데 매번 액션객체를 직접 작성하기 번거롭기때문에 함수로 만들어 관리한다. 

 

 

[ 예제 ]

 

const addNumber = () => {
  return { type: "ADD" };
};

 

 

function addTodo(data) {
	return {
   	type : 'ADD',
    data
 };
}

 

 

 

reducer

 

- 변화를 일으키는 함수이다.

 

- 액션을 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다.

 

- 현재상태 , 액션객체를 가지고 새로운 상태를 만들어 반환해준다. 

 

 

* 주의

reducer의 첫번째 매개변수 state는 처음 호출될때 undefined가 된다.  따라서 초기값을 지정해주어야한다. 

 

 

[ 예제 ]

 

const reducer = (state = 0, action) => {
  switch (action.type) {
    case "ADD":
      return state + 1;
    case "DELETE":
      return state - 1;
    default:
      return state;
  }
};

 

 

store 

- createStore함수를 사용하여 만든다. 

 

- 어떤 컴포넌트에서든 변화가 일어날 데이터는 모두 하나의 스토어에 넣는다. 

 

- 한개의 프로젝트에 단 하나의 스토어만 가질 수 있다.

 

-  스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어 있다. ( + 내장함수들 )

 

var store = Redux.createStore(reducer);

 

 

---

 

Store 내장함수 4가지 

 

subscribe

 

- store의 내장함수 중 하나이다.

 

- subscribe 함수 안에 리스너 함수를 파라미터로 넣어 호출해주면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트 될때마다 호출된다.

 

 

[ 예제 ]

 

function red() { ... 중략 ... }
store.subscribe(red); // 이 red는 구독한 함수, 값 X

function blue() { ... 중략 ... }
store.subscribe(blue);

function green() { ... 중략 ... }
store.subscribe(green);

 

 

dispatch 

 

- store의 내장함수 중 하나이다.

 

- 액션을 발생시키는것이다.

 

- 파라미터로 액션객체를 넣어주거나 , 액션 생성 함수를 넣어 실행한다. 

 

- 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜 새로운 상태를 만든다.

 

 

[ 예제 ]

 

store.dispatch(addNumber); // store.dispatch({ type: "ADD" })

 

 

getState

- store안에 있는 현재의 state값을 가져올 수 있다.

 

- subscribe 함수와 함꼐 사용시 업데이트 된 state값을 확인 할 수 있다.

 

store.getState();

 

replaceReducer

- 리듀서를 변경할때 사용한다.

 

 

 

다음 포스팅에선 리덕스를 사용하는 예제를 살펴보자!