[Redux Toolkit] 지저분한 리덕스, RTK로 정리하자

리덕스를 쓰다 보면 정말 코드가 길어진다...

준비해야 할 코드도 많고 RTK로 조금 더 쉽고 깔끔하게 사용해보자아

 

사실 리덕스 안 쓴 지 오래돼서... 기억도 가물가물하다

 

내가 이해한 그대로 작성하려하니 틀린 점이 있으면 알려주면 감사하겠습니다.

 

일단 고

 

Toolkit 에서 사용할 함수

• configureStore

const store = configureStore({
	reducer: counter
})

configureStore 함수가 createStore()를 래핑하고 있기 때문에 createStore과 동일한 기능을 제공한다.

reducer함수를 reducer라는 이름으로 전달해야 한다.

 

• createSlice

export const todoSlice = createSlice({
    name: 'todo',
    initialState: [],
    reducer: {
    	addTodo: (state, action) => {
        	state.push(action.payload);
        },
    },
});

export const { addTodo } = todoSlice.actions;

createSlice를 사용하면 객체 내의 reducer를 기반으로 액션 타입 문자열과 액션 생성자 함수를 자동으로 생성한다.

 

addTodo 할 때 push가 가능한 이유는 useimmer가 내장되어 있기 때문이다.

 

Toolkit을 사용한 간단한 TODO 만들기

// store 생성

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

export const store = configureStore({ reducer: todoSlice.reducer });

// slice 생성

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

export const todoSlice = createSlice({
    name: "todo",
    initialState: [],
    reducers: {
    	addtodo: (state, action) => {
        // action => {type: "todo/addTodo", payload: "Todo에 추가 할 입력 값"}
        	state.push(action.payload);
        },
    },
});

export const { addtodo } = todoSlice.actions;

// Todo.jsx 에서 toolkit 사용

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addtodo } from "../modules/todo";

export default function Todo() {
  const [inputValue, setInputValue] = useState("");
  const dispatch = useDispatch();
  const todo = useSelector((state) => state);
  const handleInputChange = (event) => {
    const { target } = event;

    setInputValue(target.value);
  };

  const handleClickButton = () => {
    dispatch(addtodo(inputValue));
  };

  return (
    <div>
      <input onChange={handleInputChange} />
      <button onClick={handleClickButton}>등록</button>
      {todo.map((item, index) => {
        return <div key={index}>{item}</div>;
      })}
    </div>
  );
}