Redux Toolkit 으로 카운터 | 투두 리팩토링 ☀️

리액트에서 리덕스를 편하게 이용할 수 있도록 Redux toolkit 라이브러리를 사용해보자

1. store (configStore.js) 변경하기

import counter from "../modules/counter";
import { configureStore } from "@reduxjs/toolkit";

// const rootReducer = combineReducers({
//   counter,
// });
// const store = createStore(rootReducer);

const store = configureStore({
  reducer: {
    counter: counter,
  },
});

export default store;

combineReducers 와 createStore을 각각 호출하지 않고, configStore에 객체 key-value pair로 넣어준 다음 넣을 reducer을 객체로서 value에 작성하면 된다.

 

 

2. modules 변경하기

액션생성 함수 (action creator)와 reducer함수를 같이 작성할 수 있는 createSlice() 함수를 toolkit에서 제공하고 있다. 

아래와 같이 변경하면된다.

const counterSlice = createSlice({
  name: "counter", //counter이라는 이름의 slice
  initialState: initialState,
  reducers: {
    plusN: (state, action) => {
      state.number += action.payload;
    },
    minusN: (state, action) => {
      state.number -= action.payload;
    },
  },
});

export default counterSlice.reducer; //reducer을 export
export const { plusN, minusN } = counterSlice.reducer;

 

한번에 리듀서도 만들고, 액션생성함수를 export해서 사용할 수 있다. 기존 리덕스 코드보다 훨씬 간결해졌다..!

 

---

투두리스트의 modules의 todos에서 해야될 것

1. action value

2. export action creator

3. export reducer

 

=> 한번에 redux toolkit의 slice를 통해 만들 수 있음

 

 

todo list 예시

 

import { createSlice } from "@reduxjs/toolkit";
import { v4 as uuidv4 } from "uuid";

// initial states
const initialState = [
  {
    id: uuidv4(),
    title: "리액트 공부하기",
    contents: "빨리빨리 암기하기",
    isDone: false,
  },
  {
    id: uuidv4(),
    title: "스프링 공부하기",
    contents: "인강 열심히 들어보기!!",
    isDone: true,
  },
  {
    id: uuidv4(),
    title: "데이트",
    contents: "홍대입구역에서 3시까지",
    isDone: false,
  },
];

const todosSlice = createSlice({
  name: "todos",
  initialState: initialState,
  reducers: {
    addTodo: (state, action) => {
      return [...state, action.payload];
    },
    removeTodo: (state, action) => {
      return state.filter((item) => item.id !== action.payload);
    },
    switchTodo: (state, action) => {
      return state.map((item) =>
        item.id === action.payload ? { ...item, isDone: !item.isDone } : item,
      );
    },
  },
});

export const { addTodo, removeTodo, switchTodo } = todosSlice.actions;
export default todosSlice.reducer;

 

물론 리덕스 툴킷에는 immer이 내장되어있어 불변성 유지 작업을 하지 않아도 된다.

 

그리고 devtools도 내장되어있다.

 

 

 

 

3. Flux 패턴

 

 

 

 

 

 

- 단방향 데이터 흐름

1) Actions: app에서 발생하는 이벤트나 사용자 입력과 같은 동작 -> 상태 변경 정보 포함

2) Dispatcher : 액션을 받고 등록된 콜백 함수에게 액션을 전달함 -> 액션 유형에 따라 콜백함수 실행

3) Stores: 상태 저장, 관리. 액션을 수신하고 상태 변경 로직을 수행한 후 변경된 상태를 저장 -> 뷰로 전달

4) Views: UI 표시하는 역할. 상태 변화에 따라 업데이트 되며 변경된 상태를 표시하기 위해 Stores 와 상호작용함

 

=>상태관리가 예측이 가능하고 유지보수를 쉽게 만들어주며 복잡성을 줄일 수 있다. 

 

 

 

 

https://bestalign.github.io/translation/cartoon-guide-to-flux/

Flux로의 카툰 안내서