React redux-toolkit

리덕스 제작자가 추천하는 리덕스 툴킷 한번 더 드가자

//react 18.1.x 버전이상 사용가능
npm install @reduxjs/toolkit react-redux

//index.js
import store from './store';

  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
  
//store.js
import { configureStore } from '@reduxjs/toolkit'

import 슬라이스1 from './store/슬라이스1';
import 슬라이스2 from './store/슬라이스2';


export default configureStore({
  reducer: {
    슬라이스1: 슬라이스1.reducer,
    슬라이스2: 슬라이스2.reducer //이름맘대로 : 슬라이스변수명
  }
})

//slice.js
import { createSlice } from "@reduxjs/toolkit";

let 슬라이스1 = createSlice({ //슬라이스변수명
  name: '슬라이스1', //상태명
  initialState: { 키 : '값', 나이 : '응애' }, //초기값
  reducers: { //상태변경 함수
    changeValue(state) {
      state.키 = '밸류' //useImmer 덕분에 직접 할당 가능
    },
    ageIncrease(state, i) {
      state.나이 += i.payload //파라미터를 인식시키는 화물차 payload
    }
  }
})

export let { changeValue, ageIncrease } = user.actions; //구조분해할당

export default user;

우선 Provider로 App을 감싸주고,
각 slice들을 createSlice로 생성 후 configureStore에 담아준다.

Slice에는 name, initialState, reducers가 필요하다. (export도 필수)

reducer에서 상태변경 함수를 작동시키는 이유는 많은 컴포넌트에 공유되는 상태를 redux로 상태공유를 하는데 각각 컴포넌트에서 많은 상태변경 함수(action)를 실행하면 복잡해지기 때문.

이제 갖다써보자.

import { useDispatch, useSelector } from 'react-redux';
import { ageIncrease } from '../store/슬라이스1';

  const 슬라이스1 = useSelector((state) => state.슬라이스1);
  const dispatch = useDispatch();
  
  console.log(슬라이스1) //{ 키 : '값', 나이 : '응애' }
  
  <button onClick={() => {
  	dispatch(ageIncrease(1))
  }}>나이먹기버튼</button>
  

useSelector로 import한 슬라이스의 상태를 받아와 출력해 사용할 수 있고,

useDispatch로 슬라이스의 reducer 내부의 상태변경 함수(action)를 파라미터 같이 실행시킬 수 있다.

• *reducer에서 파라미터로 받으려면 .payload를 붙여야 인식이 된다.
• reducer의 상태는 useImmer로 불변성 관리가 자동으로 되기 때문에 action을 사용해 바로바로 할당하여 변경해도된다!

중복이나 변경 삭제 함수 사용시
find, findIndex, filter 메서드를 많이 사용하는것 같다.