[React]Redux Toolkit 사용법

일단, Redux Toolkit은 상태관리 라이브러리이다.

아래와 같은 흐름으로 데이터를 관리하는 Flux 아키텍처이다.

비슷한 라이브러리로는 Redux,MobX, Recoil등이 있으며 자세한 설명을 아래의 링크를 참조하자

상태관리 라이브러리 정리 내용 참조

Redux를 쓰는 이유를 요약해보면,

1. store에 모든 상태를 저장하여 관리가 용이하다.
2. 데이타 관리가 보수적이므로 확장과 디버깅이 용이하다.
3. But 비동기 처리의 경우 Redux-saga를 사용해야함

이제는 사용방법을 알아보자.

1. redux toolkit 설치

npm install @reduxjs/toolkit react-redux

2. 파일 생성

▶ 임의의 폴더에 store.js파일을 생성하고 템플릿을 쓴다.

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

3. provider 적용

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store'
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </Provider>
);

▶ Provider, store를 import 한다.
▶ 사용할 컴포넌트에 Provider로 감싸주고 store를 props로 전달한다.

4. 변수 지정

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

let user = createSlice({
  name : 'user',
  initialState : 'kim',
})

export default configureStore({
  reducer: {
    user : user.reducer,
  }
}) 

▶ name,initialState를 초기 값으로 저장해준다.
▶ 사용할 상태값을 reducer 안에 저장해준다.

5. 사용할 component에서 불러온다.

import logo from "./logo.svg";
import "./App.css";
import { useDispatch, useSelector } from "react-redux";
import { changeName } from "./store";

function App() {
  let result = useSelector((state) => {
    return state;
  });
  // let dispatch = useDispatch();
  console.log(result.user)
  return (
    <div className="App">
      <div>Hello World</div>
      <div>{result.user}</div>
    </div>
  );
}

export default App;

▶useSelector를 이용하여 변수로 저장한다.

6. 변경 시 actions를 등록

let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers:{
    changeName(state){
      return 'john'+state
    }
  }
})

export let {changeName}=user.actions

▶ 변경이 필요할 경우 initialState 밑에 reducers를 등록하고 함수를 지정하여 필요한 변경 내용을 만든다.
▶ exportlet {함수명} = 변수명.actions로 함수를 저장한다.

import logo from "./logo.svg";
import "./App.css";
import { useDispatch, useSelector } from "react-redux";
import { changeName } from "./store";

function App() {
  let result = useSelector((state) => {
    return state;
  });
  let dispatch = useDispatch();
  return (
    <div className="App">
      <div>Hello World</div>
      <div>{result.user}</div>
      <button onClick={ ()=>{dispatch(changeName())} }></button>
    </div>
  );
}

export default App;

▶변경이 필요한 component로 이동하여 dispatch와 지정한 함수를 import 한다.
▶ eventlistener에 distpatch와 지정한 함수를 호출하여 변경 시킨다.

※ 자료형이 object,array라면?

▶ 원하는 자료의 프로퍼티를 바꿔주기만 해도 적용 가능하다.(immer.js라는 라이브러리가 불변성을 유지하면서 변경을 지원해줌)

※ 변수를 담아서 변경하고 싶다면?

<button onClick={ ()=>{dispatch(changeName(100))} }>Change</button>

▶ 이런식으로 함수에 변수를 담아서 보내면 된다.

let user = createSlice({
  name : 'user',
  initialState : {name:'kim',age:20},
  reducers:{
    changeName(state,a){
      state.age=state.age+a.payload
    }
  }
})

▶ 다만 받아서 쓸 때 .payload를 붙여서 적용해줘야한다.