Redux Toolkit은 Redux 로직을 작성하는 공식 권장 방법입니다. 이는 기본적으로 저장소 설정을 위한 좋은 기본값을 제공하며 가장 일반적으로 사용되는 Redux 애드온이 내장되어 있습니다. 이 블로그에서는 Redux Toolkit을 React 애플리케이션과 통합하는 기본 사항을 살펴보겠습니다.

Redux 툴킷이란 무엇입니까?

Redux Toolkit은 Redux 로직 작성 프로세스를 단순화하는 데 도움이 되는 도구 세트입니다. 여기에는 저장소 설정, 리듀서 생성, 불변 업데이트 로직 작성과 같은 일반적인 사용 사례를 단순화하는 유틸리티가 포함되어 있습니다.

React로 Redux 툴킷 설정

React 애플리케이션에서 Redux Toolkit을 설정하는 단계를 살펴보겠습니다.

1단계: 종속성 설치

먼저 필요한 패키지를 설치해야 합니다. npm 또는 Yarn을 사용하여 이 작업을 수행할 수 있습니다.

npm install @reduxjs/toolkit react-redux

2단계: Redux 저장소 생성

스토어는 Redux에 생명을 불어넣는 객체입니다. Redux Toolkit을 사용하면 configureStore 기능을 사용하여 스토어를 생성할 수 있습니다.

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

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

export default store;

3단계: 슬라이스 생성

슬라이스(Slice)는 앱의 단일 기능에 대한 Redux 감속기 논리 및 작업의 모음입니다. Redux Toolkit의 createSlice 기능은 액션 생성자와 액션 유형을 자동으로 생성합니다.

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value  = 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

4단계: React 애플리케이션에 스토어 제공

Redux 스토어를 React 구성 요소에서 사용할 수 있도록 하려면 React-redux의 Provider 구성 요소를 사용해야 합니다.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

5단계: React 구성요소를 Redux Store에 연결

React 구성 요소를 Redux 스토어에 연결하려면 반응 redux의 useSelector 및 useDispatch 후크를 사용할 수 있습니다.

// src/components/Counter.jsx
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../features/counter/counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    

      
{count}
       dispatch(increment())}>Increment
       dispatch(decrement())}>Decrement
    
  );
}

export default Counter;

6단계: 앱에서 연결된 구성 요소 사용

마지막으로 애플리케이션에서 연결된 구성 요소를 사용할 수 있습니다.

// src/App.js
import Counter from './components/Counter';

function App() {
  return (
    

      
    
  );
}

export default App;

결론

이 단계를 따르면 React 애플리케이션에서 Redux Toolkit을 설정하여 예측 가능하고 유지 관리 가능한 방식으로 상태를 관리할 수 있습니다. Redux 툴킷은 Redux로 작업할 때 많은 일반적인 작업을 단순화하여 Redux 로직을 더 쉽게 작성하고 유지 관리할 수 있게 해줍니다.

추가 탐색

Redux Toolkit 및 React에 대해 더 자세히 알아보고 싶은 분들을 위해 다음과 같은 유용한 리소스를 제공합니다.

• Redux 툴킷 문서: 공식 문서는 포괄적인 가이드와 API 참조를 제공합니다.
  • Redux 툴킷 문서
• React Redux 문서: React와 함께 Redux를 사용하는 방법에 대해 자세히 알아보세요.
  • React Redux 문서
• Redux 필수 튜토리얼: Redux Toolkit을 시작하고 실행하는 데 도움이 되는 단계별 튜토리얼입니다.
  • Redux 필수 튜토리얼
• Redux 기본 튜토리얼: Redux의 핵심 개념을 다루는 자세한 튜토리얼입니다.
  • Redux 기초 튜토리얼

읽어주셔서 감사합니다!
포.