redux- toolkit

1. redux-toolkit

Redux에서 상태를 더욱 쉽게 관리하고 구조화하는 데 도움을 주는 패키지로 Redux를 사용할 때 자주 사용되는 패턴과 기능을 쉽게 구현할 수 있도록 도와준다.

---

2.redux-toolkit의 기능

1) configureStore

• Redux Store 생성에 필요한 여러 옵션과 기능들을 미리 구성해둔 상태이며, 초기 구성이 쉽다.
• 여러개의 리듀서를 하나의 리듀서 객체로 합칠 수 있다.

2) createSlice

• 액션 타입, 액션 생성자 함수 및 Reducer 함수를 모두 한 번에 생성할 수 있게 해준다.
• 객체를 인자에 넣어주어야한다.
• 모든 Slice는 name을 가져야한다.
• 그 뒤에는 초기값(initialState)과 reducer를 설정해야한다.
• 액션 타입을 정해줄 필요 없이 메서드에 전달한 값을 필드명이 payload인 곳에 자동으로 저장한다.

createSlice 에서 reducer를 정의할 때에는 개발자가 불변성을 고려하면서 작성하지 않아도, 내부적으로 immer 라이브러리를 사용해서 안전하게 불변성을 유지하면서 변화한 상태 객체를 반환시킨다. 즉, createSlice 안에서는 그냥 이전 상태값에 새로운 값을 대입하듯이 코드를 작성해도 괜찮다.

3) createAsyncThunk

• 비동기 작업을 처리하는 함수를 생성하고, 이 함수에서 사용할 액션 타입과 액션 생성자 함수를 생성한다.

4) createEntityAdapter

• 엔티티를 관리하기 위해 필요한 Reducer, 액션 생성자 함수 및 Selector를 생성한다.

---

3. redux-toolkit 사용법

1) npm install @reduxjs/toolkit

2) createSlice 사용해 액션, 리듀서 정의하기

//store/index.js


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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0, show : true },
  reducers: {
    increment: (state) => {
      state.value++;
    },
    decrement: (state) => {
      state.value--;
    },
    //action.payload값을 받아서 그만큼 이전값에 더한다.
    increase: (state, action) => {
      state.value += action.payload;
    },
    toggleCounter: (state) => {
      state.show = !state.show;
    },
  },
});

3) configureStore 사용해 store 생성하고 slice를 store에 등록

//store/index.js


const store = configureStore({
  //여러개의 리듀서 합치기
  reducer: {
    counter: counterSlice.reducer,
  },
});

export const counterAction = counterSlice.actions

export default store;

4) action dispatch 하기

//action을 사용하려는 컴포넌트


import { useSelector, useDispatch } from 'react-redux'
import { counterAction } from '../store/index'


function App(){
  const dispatch = useDispatch();
  const show = useSelector((state) => state.counter.show);
  const value = useSelector((state) => state.counter.value);

  const incrementHandler = () =>{
    dispatch(counterAction.increment()); 
  }

  const decrementHandler = () =>{
    dispatch(counterAction.decrement());
  }

  const increaseHandler = (n) =>{
    //action.payload로 n 값이 전달된다.
    dispatch(counterAction.increase(n));
  }

  const showHandler = () =>{
    dispatch(counterAction.toggle());
  }
}

---

4. redux-toolkit의 비동기 작업

redux-toolkit에서는 비동기 처리를 하기 위해 creatAsyncThunk를 사용하면 따로 미들웨어 설정을 할 필요 없다.

사용법

1. createAsyncThunk 생성하기

• createAsyncThunk의 첫번째 파라미터는 action의 이름을 넣어주고 두번째 파라미터는 처리할 비동기 함수와 그 안에 리턴할 payload를 넣어준다.

import {createSlice, createAsyncThunk} from "@reduxjs/toolkit";
import axios from "axios";


export const loadBucket = createAsyncThunk(
  // action 이름
  "load/Bucket",
  
  // 처리할 비동기 함수
  async () => {
    const res = await axios.get("http://localhost:5008/bucket");
    // action의 payload 리턴
    return res.data;
  }
);

2. slice에 extraReducers 추가해주기

• extraReducers에서는 createAsyncThunk로 action의 peding, fulfilled, rejected 상태에 대한 처리 결과를 넣을 수 있다.

const bucketSlice = createSlice({
  name: "bucket",
  initialState: {list: []},
  reducers: {},
  
  // 비동기 함수의 pending, fulfilled, rejected를 처리할 내용을 넣어준다.
  extraReducers: {
    [loadBucket.pending]: (state, action) => {
      console.log('pending');
    },
    
    // 비동기 함수가 fulfilled 되었을 때, state를 변경
    [loadBucket.fulfilled]: (state, action) => {
      state.list = action.payload;
      console.log('fulfilled');
    },
    
    [loadBucket.rejected]: (state, action) => {
      console.log('rejected')
    }
  }
})
export default bucketSlice.reducer;

3. 컴포넌트에서 사용하기

import {loadBucket} from "./store/bucketSlice";
import {useDispatch, useSelector} from "react-redux";
import {useEffect} from "react";

const App = () => {
  const bucket_list = useSelector(state => state.bucket.list);
  const dispatch = useDispatch();
  
  useEffect(() => {
    //createAsyncThunk 호출
    dispatch(loadBucket());
  }, [])
  
  return (
    <>
      {bucket_list.map((item, index) => (
        <div key={index}>
          {item.text}
        </div>
      ))}
    </>

  );
}

export default App;