우리는 redux가 특히 React로 작업할 때 JavaScript 애플리케이션을 위한 강력한 상태 관리 라이브러리라는 것을 이미 알고 있습니다.
그러나 redux를 설정하는 데 필요한 코드가 너무 많기 때문에 redux로 작업하는 것은 어렵습니다. 따라서 유지 관리 및 디버깅이 어렵습니다. Redux Toolkit이 도움이 되는 곳입니다.
Redux 툴킷 문제 해결
Redux 툴킷은 Redux 로직을 작성하는 공식적이고 권장되는 방법입니다. 개발을 단순화하고 상용구 코드를 줄여 확장성과 유지 관리 가능한 애플리케이션을 만드는 데 도움이 되는 도구 세트를 제공합니다.
Redux 툴킷의 주요 이점:
모든 자바스크립트 라이브러리에서 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
슬라이스(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 함수는 각 감속기 함수에 대한 액션 생성자를 자동으로 생성합니다.
이제 슬라이스가 있으므로 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') );
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;
이 부분에서는 슬라이스 생성, 스토어 구성, 후크를 사용하여 구성 요소를 Redux 스토어에 연결하는 등 React 애플리케이션에서 Redux Toolkit을 설정하는 기본 사항을 다루었습니다. 다음 부분에서는 API에서 데이터를 가져오고 다양한 로딩 상태를 관리하기 위해 createAsyncThunk를 사용하여 비동기 논리를 처리하는 방법을 자세히 살펴보겠습니다.
2부: 고급 Redux 툴킷 - createAsyncThunk를 사용한 비동기 논리를 기대해 주세요!
위 내용은 완전한 Redux 툴킷(1부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!