완전한 Redux 툴킷(1부)

Redux Toolkit의 목적

우리는 redux가 특히 React로 작업할 때 JavaScript 애플리케이션을 위한 강력한 상태 관리 라이브러리라는 것을 이미 알고 있습니다.
그러나 redux를 설정하는 데 필요한 코드가 너무 많기 때문에 redux로 작업하는 것은 어렵습니다. 따라서 유지 관리 및 디버깅이 어렵습니다. Redux Toolkit이 도움이 되는 곳입니다.
Redux 툴킷 문제 해결

• 스토어 세팅이 너무 복잡해요.
• Redux와 함께 사용할 수 있는 많은 패키지(예: 미들웨어, 도구)를 추가합니다.
• Redux를 설정하려면 너무 많은 코드가 필요합니다

Redux 툴킷은 Redux 로직을 작성하는 공식적이고 권장되는 방법입니다. 개발을 단순화하고 상용구 코드를 줄여 확장성과 유지 관리 가능한 애플리케이션을 만드는 데 도움이 되는 도구 세트를 제공합니다.

Redux 툴킷의 주요 이점:

1. 상용구 코드 감소: 액션 생성자와 상수가 필요하지 않습니다.
2. 단순화된 스토어 설정: 합리적인 기본값으로 스토어를 구성할 수 있는 단일 API를 제공합니다.
3. 불변성 및 DevTools에 대한 기본 지원: Redux DevTools를 자동으로 활성화하고 불변성을 위해 Immer와 통합합니다.
4. 더 나은 TypeScript 지원: 더 나은 입력 기능을 제공하고 TypeScript와 잘 통합됩니다.

모든 자바스크립트 라이브러리에서 redux 툴킷을 사용할 수 있으므로 React로 redux 툴킷을 설정했습니다.

React 애플리케이션에서 Redux Toolkit 설정

1단계: 새 React 프로젝트 만들기

먼저 새로운 React 애플리케이션을 만들어 보겠습니다. 이 목적으로 create-react-app 또는 Vite를 사용할 수 있습니다. 여기서는 단순화를 위해 create-react-app을 사용하겠습니다.

npx create-react-app redux-toolkit-example
cd redux-toolkit-example

2단계: Redux Toolkit 및 React-Redux 설치

다음으로 필요한 패키지인 @reduxjs/toolkit 및 React-redux를 설치합니다.

npm install @reduxjs/toolkit react-redux

1. 슬라이스 및 리듀서 이해

슬라이스(Slice)는 애플리케이션의 특정 기능에 대한 Redux 감속기 논리 및 작업의 모음입니다. Redux Toolkit은 최소한의 상용구로 상태 조각을 생성하는 데 도움이 되는 createSlice 기능을 제공합니다.

1단계: 슬라이스 만들기
간단한 카운터 슬라이스를 만들어 보겠습니다. 기능/카운터 디렉터리 내에 counterSlice.js라는 새 파일을 만듭니다.

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

const initialState = {
  value: 0,
};

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

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

여기에서는 초기 상태와 3개의 감소기(증가, 감소 및 incrementByAmount)가 있는 counter라는 슬라이스를 정의합니다. createSlice 함수는 각 감속기 함수에 대한 액션 생성자를 자동으로 생성합니다.

1. Redux 스토어 구성

이제 슬라이스가 있으므로 Redux 스토어를 구성해 보겠습니다. Redux Toolkit은 적절한 기본값으로 스토어를 설정하는configureStore 기능을 제공합니다.

1단계: 스토어 만들기
앱 디렉터리 내에 store.js 파일을 만듭니다.

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

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

export default store;

2단계: 앱에 스토어 제공
React-redux의 구성 요소에 React 애플리케이션을 래핑하고 이를 스토어에 전달합니다. index.js 파일을 업데이트하세요.

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

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

1. 스토어에 구성 요소 연결

Redux 스토어와 상호작용하려면 React-redux에서 제공하는 useSelector 및 useDispatch 후크를 사용하세요.
1단계: useSelector를 사용하여 상태에 액세스
useSelector 후크를 사용하여 스토어의 상태에 액세스하세요

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

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
};

export default Counter;

2단계: 앱에서 카운터 구성요소 사용
기본 앱 구성 요소에서 Counter 구성 요소를 가져와 사용합니다.

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

1. 결론 및 다음 단계

이 부분에서는 슬라이스 생성, 스토어 구성, 후크를 사용하여 구성 요소를 Redux 스토어에 연결하는 등 React 애플리케이션에서 Redux Toolkit을 설정하는 기본 사항을 다루었습니다. 다음 부분에서는 API에서 데이터를 가져오고 다양한 로딩 상태를 관리하기 위해 createAsyncThunk를 사용하여 비동기 논리를 처리하는 방법을 자세히 살펴보겠습니다.

2부: 고급 Redux 툴킷 - createAsyncThunk를 사용한 비동기 논리를 기대해 주세요!

위 내용은 완전한 Redux 툴킷(1부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!