Redux 시작하기

Redux는 Javascript의 상태 관리 라이브러리이다. Redux를 사용하면 특정 변수를 state로 지정해 저장할 수 있고, 또 어느 위치에서든 저장한 state를 조회하거나 수정할 수 있다.

1. Redux 설치하기

Redux를 사용하기 위해선 cdn으로 import하는 방식과 node.js에 설치하는 방식이 있는데, cdn으로 import하는 방식은 잘 사용되지 않는다. node.js에 Redux를 설치하는 방법은 아래와 같다.

npm i @reduxjs/toolkit

 

2. state 저장하기

Redux에서 state를 저장하기 위해서는 configureStore 함수를 사용하면 되는데, 이 때 인자로는 반드시 reducer 필드를 가진 object를 사용해야 한다. 이 reducer는 Redux에서 관리하는 state를 관리하는 함수인데, 인자로 state와 state을 수정하기 위해 필요한 값을 모아둔 object인 action을 인자로 받는다. 사용 방법은 아래와 같다.

import { configureStore } from "@reduxjs/toolkit";

// state의 초기값
const INIT_VALUE = 0

// state에 행할 수정의 각 종류
const ACTION_TYPE1 = "action_type_1"
const ACTION_TYPE2 = "action_type_2"
const ACTION_TYPE3 = "action_type_3"

const reducer = (state = INIT_VALUE, action) => {
    // state에 행할 수정의 종류에 따라 수정하는 코드를 각각 구현
    switch(action.type) {
        case ACTION_TYPE1:
            // state를 수정하는 코드
            break
        case ACTION_TYPE2:
            // state를 수정하는 코드
            break
        case ACTION_TYPE3:
            // state를 수정하는 코드
            break
        // 생성 혹은 수정한 state를 반환해 저장
        return state
    }
}

const store = configureStore({ reducer: reducer })

reducer 함수를 보면 인자로 state와 action을 받아 저장하고자 하는 state를 반환하는데, 첫 번째 인자인 state는 기존에 Redux로 저장한 state이고 action은 state를 수정하기 위한 정보를 모아둔 object이다. 

• state는 항상 기존에 Redux에 저장한 state값이 들어오기 때문에, state를 생성할 때에는 undefined가 들어온다. 따라서 state를 생성할 때 저장할 초기값을 미리 지정해주어야 한다.
• action은 object 타입이어야 하고, type 필드를 항상 가지고 있어야 한다. 경우에 따라선 state를 수정하기 위해 필요한 값을 필드로 지닐 수도 있다.

3. state 조회 및 수정하기

생성한 state를 조회하기 위해서는 configureStore로 생성한 store에서 getState 메소드를 실행하면 되고, 수정하기 위해서는 store에서 action을 인자로 갖는 dispatch 메소드를 실행시키면 된다. 사용 방법은 아래와 같다.

// store에서 state를 get
const state = store.getState()

// state에 종류가 ACTION_TYPE1인 연산을 실행
store.dispatch({type: ACTION_TYPE1})

// state가 바뀔 때마다 실행됨
store.subscribe(() => {console.log("state has changed.")})