React와 함께 Redux 툴킷 사용하기: 간단한 가이드

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단계: 슬라이스 생성

슬라이스란 앱의 단일 기능에 대한 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(
  <provider store="{store}">
    <app></app>
  </provider>,
  document.getElementById('root')
);

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

React 구성 요소를 Redux 스토어에 연결하려면 React-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 (
    <div>
      <h1 id="count">{count}</h1>
      <button onclick="{()"> dispatch(increment())}>Increment</button>
      <button onclick="{()"> dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

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

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

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

function App() {
  return (
    <div>
      <counter></counter>
    </div>
  );
}

export default App;

---

결론

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

---

추가 탐색

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

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

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

위 내용은 React와 함께 Redux 툴킷 사용하기: 간단한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!