24. 06. 03 TIL redux-1

리덕스는 상태 관리 도구다.

 

상태는 우리가 앱에서 어떤 일이 벌어지는지 기억하는 것인데,

리덕스를 사용하면 이 상태를 쉽게 관리, 사용할 수 있다.

 

 

1. 큰 상자 : store

2. 큰 상자에 들어가는 작은 상자들 : slice

3. 현재 데이터와 상황 저장 : state

4. 상태를 변경하려는 요청 담은 메세지 : action

5. 액션 안에 들어 있는 실제 데이터 : payload

6. 리덕스 리듀서가 어떤 종류의 액션인지 구분하는 데 사용 : type

7. 액션을 스토어에 보내는 함수 : dispatch -> 스토어가 받아 상태 업데이트

8. 액션을 보고 상태를 실제로 변경하는 함수 : reducer

 

 

 

리덕스는 먼저 툴킷 설치 후, 스토어를 만든다.

 

이제 스토어를 만들어보자,

// store.js 파일
import { configureStore } from '@reduxjs/toolkit'; -> 리덕스 툴킷에서 도구를 가져와 쉽게 스토어를 만든다.

const store = configureStore({ -> store라는 이름의 변수를 만든다. 
리덕스 툴킷의 configureStore 함수를 사용해 스토어를 설정한다.
  reducer: { -> 스토어에서 상태를 바꾸는 방법을 설명하는 리듀서들을 넣는다.
    // 리듀서들은 이곳에 추가한다.
  },
});

export default store;

 

configurestore는 먼저 큰 상자인 store을 만드는 도구다.

 

이 큰 상자에는 여러 작은 상자들 (slices) 이 들어간다. 또한 앱의 모든 상태(state)를 저장한다.

 

그리고 createSlice는 특정 상태(state)와 액션을 보고 그 상태를 어떻게 바꿀지(reducers)를 포함한다.

 

먼저 configureStore 내부에는 스토어를 설정하기 위한 정보들이 같이 들어가는데, 여기에는 주로 리듀서들이 포함된다.

 

이 리듀서들은 각각의 슬라이스에서 만들어진 것들이다. (import해서 받아온다)

---

** createSlice 예시

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter', // 슬라이스의 이름
  initialState: { value: 0 }, // 슬라이스의 초기 상태
  reducers: {
    increment: (state) => {
      state.value += 1; // 값을 1 증가시키는 방법
    },
    decrement: (state) => {
      state.value -= 1; // 값을 1 감소시키는 방법
    },
  },
});

export const { increment, decrement } = counterSlice.actions; // 액션들을 export
export default counterSlice.reducer; // 리듀서를 export

이 함수 안에는 슬라이스를 설정하기 위한 정보들이 들어간다.

---

 

이제 본격적으로 수정해보자.

 

 store는 냅두고 slice 파일을 하나 생성한다.

 

const Router = () => {
  const MonthSaveFunc = (month) => {
    setSaveMonth(month);
    localStorage.setItem('month', month);
  };

  function lastMonth() {
    let last = localStorage.getItem('month');
    return last ? Number(last) : 5;
  }

  const [saveMonth, setSaveMonth] = useState(lastMonth);
  const [itemList, setItemList] = useState([]);
};

이것은 나의 기존 코드다.

 

리덕스 툴킷을 사용하면 상태를 중앙에서 관리하므로 전체에서 상태를 공유할 수 있는데,

이를 위해서 슬라이스 파일에서 초기 상태를 정의한다.

 

initailState는 단순히 상태 초기값을 설정해주는 객체다. 상태의 초기값만 있으면 된다!

 

기존 코드는 -> const [saveMonth, setSaveMonth] = useState(lastMonth);  이렇게 설정되어 있다.

 

그리고 저 lastMonth는 ->   function lastMonth() {
    let last = localStorage.getItem('month');
    return last ? Number(last) : 5;
  } 이렇게 함수로 만들어졌지.

 

로컬 스토리지의 값이 비어있으면 로컬스토리지의 month를 가져오고 아니면 5를 뱉는 함수다.

 

이걸 기본 값으로 넣어줬었는데

 

saveMonth: Number(localStorage.getItem('month')) || 5

 

이렇게 넣어줘서 값이 있으면 month를 주고 없으면 5를 주는 것으로 간단하게 바꿔 넣어준다.

 

---

const [itemList, setItemList] = useState([]);

그리고 itemList는 빈 배열이 하나 들어가 있으므로

 

-> itemList : [] 이렇게만 넣어준다. 

 

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  // 처음에 어떤 상태로 시작할 것이냐 (초기 상태)
  saveMonth: Number(localStorage.getItem('month')) || 5,
  itemListt: [],
};

그럼 결과는 이렇게 되겠지예

 

초기 상태를 정의해주었으니 이제 슬라이스를 만들어보자.

 

const budgetSlice = createSlice({})

먼저 createSlice라는 함수를 사용해 새로운 슬라이스를 만든다.

리덕스 상태의 한 부분을 관리하는 역할을 한다.

 

이제 이 슬라이스의 이름을 쉽게 구분하기 위해 이름을 지어준다.

 

그 다음엔 initalState를 넣어주는데 이 슬라이스의 기본값을 설정해준다.

 

이제 두 가지 리듀서를 정의하면 되겠다.

 

reducers: {
    setSaveMonth: (state, action) => {
      state.saveMonth = action.payload;
      localStorage.setItem('month', action.payload);
    },

 

첫 번째 리듀서는 saveMonth라는 상태를 설정해준다. 이 리듀서 함수는 상태, 액션 두 개를 인자로 받는다.

 

state.saveMonth는 현재 상태의 saveMonth를 가리키고 있고,

 

action.payload는 액션 객체 안에 있는 실제 데이터로 새로운 saveMonth의 값을 가지고 있다.