[Redux] 베이직

리덕스

리덕스는 상태관리 라이브러리중 하나로 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜 더욱 효율적으로 관리 할 수 있으며, 글로벌 상태 관리도 쉽게 할 수 있습니다.

리덕스의 3가지 규칙

1. 하나의 어플리케이션 안에는 하나의 스토어!

하나의 어플리케이션에 꼭 하나의 스토어를 만들어서 사용합니다.
여러개의 스토어를 사용하는 것이 가능하기는 하나, 권장되지는 않습니다. 특정 업데이트가 너무 빈번하게 일어나거나 어플리케이션의 특정 부분을 완전히 분리시키게 될 때 여러개의 스토어를 만들 수도 있습니다.

2. 상태는 읽기전용 입니다.

리덕스에서도 기존의 상태는 건들이지 않고, spread 연산자를 사용하여 새로운 상태를 생성하여 업데이트 해주는 방식으로 업데이트합니다.
리덕스에서 불변성을 유지해야하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위하여 shallow equality 검사를 하기 때문입니다.

3. 리듀서는 순수한 함수여야합니다.

리듀서는 이전 상태와 액션 객체를 파라미터로 받습니다. 이전의 상태는 건들이지 않고, 변화로 새로운 상태 객체를 만듭니다. 그리고 동일 인풋에 대한 동일 아웃풋이 보장되어야 합니다.

설치

npm i redux

리덕스 키워드

action

상태가 어떠한 변화가 필요할 때, action을 발생 시킵니다. action의 형태는 객체입니다.
그리고 action의 객체에는 type이란 필드가 필수로 들어가야합니다. type외의 다른 요소는 자율적으로 설정이 가능합니다.

{
  type: "ADD_TODO",
  text: "Study Redux",
  data: {
    id: "TODO1",
    time: 20220504
  }
}

action 함수

편리함을 위해 화살표 함수 형태로 작성하며(기존 function함수 형태로 사용해도 무관), 굳이 액션함수를 생성해 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위해 만들어 사용합니다.
그래서 보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용합니다.
또, 사전에 오류를 미리 방지하기 위해 타입을 상수로 선언한 후 사용하는 것을 추천합니다.

const ADD_TODO = "ADD_TODO";

export const addToDo = text => {
  type: ADD_TODO,
  text
}

reducer

두가지의 파라미터를 가져오며, 하나는 현재 상태인 state 또 하나는 전달받은 action을 받와 새로운 상태를 만들어 반환합니다. 상태 업데이트 로직은 switch문을 사용합니다. useReducer를 사용할때 작성하는 리듀서와 똑같은 형태를 가지고 있습니다.

const INCREASE = "INCREASE";
const DECREASE = "DECREASE";

const reducer = (state, action) => {
  switch(action.type) {
	case INCREASE:
      return state + 1;
    case DECREASE:
      return state - 1;
    default:
    return state;
  }
}

store

정보를 저장하는 또는 저장되어 있는 곳 입니다.
스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 몇가지 내장 함수들이 있습니다.
주의 해야할 포인트는 리덕스에서는 한 애플리케이션당 하나의 스토어를 만들어야합니다.

dispatch

dispatch는 스토어의 내장함수 중 하나로, 액션을 발생 시키는 것 이라고 생각하면 됩니다.

store.dispatch(action())

subscribe

subscribe 또한 스토어의 내장함수 중 하나입니다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아오며, subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출됩니다.
리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용하는 일은 별로 없습니다.

reference : velopert GitBook