리덕스란? ( 전역 상태관리 라이브러리 )

개인 프로젝트 진행중 유튜브 api호출하던중 전역관리의 필요성을 느껴 리덕스를 사용하던중
과정을 기록해보려고합니다

리덕스란

리덕스는 자바스크립트 앱의 상태 관리를 위한 상태 관리 라이브러리입니다. 앱의 상태를 예측 가능하고 효율적으로 관리할 수 있도록 도와줍니다. 리덕스는 React와 함께 주로 사용되지만 다른 라이브러리나 프레임워크와도 조합하여 사용할 수 있습니다.

redux의 기본 개념

- 스토어라는 하나뿐인 데이터 공간에서 데이터를 보관한다
동일한 데이터는 항상 같은 곳에서 가지고 온다.

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

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

Redux의 장점

• 순수함수를 사용하기 때문에 상태예측이 비교적 쉽게 유지보수에 용이함
• 액션과 로그 기록시 디버깅에 유리
• 순수함수를 사용하기 때문에 테스트를 붙이기 간편함

사용자의 Action dispatch() 메소드로 전달 -> Reducer를 호출한다 -> Reducer는 새로운 Store 를 생성

Store(스토어)

스토어는 상태가 관리되는 공간이다.
컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.
컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다

Action(액션)

액션은 앱에서 스토어에 운반할 데이터를 말한다.
액션은 자바스크립트 객체 형식으로 되어있다.

Reducer(리듀서)

액션을 스토어에 바로 전달하는 것이 아닌 리듀서에 전달해야한다.
리듀서가 주문을 보고 스토어의 상태를 업데이트하는 것이다.
액션을 리듀서에 전달하기 위해서는 dispatch() 메소드를 사용해야한다.

리덕스 설치방법

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

NPM을 사용해 설치해주고
리덕스 공식홈페이지에서 다루고있는 카운터 예제를 변형해서 기록해볼게요

import { createStore } from 'redux'

스토어를 선언해주고

const initialState = {
 state : 0, 
}

초기값들을 initialState을 선언해 따로 빼줍니다

const counter = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

저는 const생성자를 사용해서 작성했습니다.
이것이 (state, action) => state 형태의 순수 함수인 리듀서입니다.
중요한 점은 상태 객체를 변경해서는 안되며, 상태가 바뀐다면 새로운 객체를 반환해야 한다는 것입니다.

let store = createStore(counter)
앱의 상태를 보관하는 Redux 저장소를 만듭니다.
API로는 { subscribe, dispatch, getState }가 있습니다

store.subscribe(() => console.log(store.getState())))

subscribe()를 이용해 상태 변화에 따라 UI가 변경되게 할 수 있습니다.
보통은 subscribe()를 직접 사용하기보다는 뷰 바인딩 라이브러리(예를 들어 React Redux)를 사용합니다.
하지만 현재 상태를 localStorage에 영속적으로 저장할 때도 편리합니다.

store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

내부 상태를 변경하는 유일한 방법은 액션을 설정해서 보내거나
디스패치 메서드를 사용해서 값을 보낼수도 있습니다.