[React] Redux-Toolkit 설치 / counter app / TodoList

Redux-toolkit(RTK)이란

기존의 리덕스를 개량한 것이다

코드는 더 적게, 그리고 더 편하게 개발했다

기존의 리덕스와 다른 점은 Action Value와 Action Creator, Reducer가 하나로 합쳐졌다는 점이다

 

---

 

리덕스 툴킷 설치

 

// NPM
npm install @reduxjs/toolkit

// Yarn
yarn add @reduxjs/toolkit

 

 

 

 

RTK에선 Slice라는 API를 사용한다

//createSlice API 뼈대

const counterSlice = createSlice({
	name: '', // 이 모듈의 이름
	initialState : {}, // 이 모듈의 초기상태 값
	reducers : {}, // 이 모듈의 Reducer 로직
})

 

 

 

---

 

RTK로 counter app 만들기

 

 

 

+ 버튼을 누르면 1만큼 증가

- 버튼을 누르면 1만큼 감소

 

 

 

src > redux > config > configStore.js

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


// 일반 리덕스
// const rootReducer = combineReducers({
//   //states
//   counter,
// });
// const store = createStore(rootReducer);


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


export default store;

 

 

src > App.js

import { useDispatch, useSelector } from "react-redux";
import { addNumber, minusNumber } from "./redux/modules/counter";

function App() {
  const number = useSelector((state) => {
    return state.counter.number;
  });

  const dispatch = useDispatch();

  const onPlusClickHandler = () => {
    dispatch(addNumber(1));
  };
  const onMinusClickHandler = () => {
    dispatch(minusNumber(1));
  };
  
  
  return (
    <>
      <div>{number}</div>
      <button onClick={onPlusClickHandler}>+</button>
      <button onClick={onMinusClickHandler}>-</button>
    </>
  );
}

export default App;

 

 

src > redux > modules > counter.js

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

// Initial State
const initialState = {
  number: 0,
};


const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

// reducer 는 configStore에 등록하기 위해 export default
export default counterSlice.reducer;
// Action Creator는 컴포넌트에서 사용하기 위해 export
export const { addNumber, minusNumber } = counterSlice.actions;

 

 

---

 

RTK로 TodoList 만들기

 

 

 

src > redux > config > configStore.js

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


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


export default store;

 

 

src > redux > modules > todos.js

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,
  },
];



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



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

 

 

 

 

redux-devtool을 이용하면 store를 한 눈에 잘 볼 수 있다!

 

 

 

---