Redux Toolkit은 Redux 로직을 작성하는 공식 권장 방법입니다. 이는 기본적으로 저장소 설정을 위한 좋은 기본값을 제공하며 가장 일반적으로 사용되는 Redux 애드온이 내장되어 있습니다. 이 블로그에서는 Redux Toolkit을 React 애플리케이션과 통합하는 기본 사항을 살펴보겠습니다.
Redux Toolkit은 Redux 로직 작성 프로세스를 단순화하는 데 도움이 되는 도구 세트입니다. 여기에는 저장소 설정, 리듀서 생성, 불변 업데이트 로직 작성과 같은 일반적인 사용 사례를 단순화하는 유틸리티가 포함되어 있습니다.
React 애플리케이션에서 Redux Toolkit을 설정하는 단계를 살펴보겠습니다.
먼저 필요한 패키지를 설치해야 합니다. npm이나 Yarn을 사용하여 이 작업을 수행할 수 있습니다.
npm install @reduxjs/toolkit react-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;
슬라이스란 앱의 단일 기능에 대한 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;
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 /> </Provider>, document.getElementById('root') );
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>{count}</h1> <button onClick={() => dispatch(increment())}>Increment</button> <button onClick={() => dispatch(decrement())}>Decrement</button> </div> ); } export default Counter;
마지막으로 애플리케이션에서 연결된 구성 요소를 사용할 수 있습니다.
// src/App.js import Counter from './components/Counter'; function App() { return ( <div> <Counter /> </div> ); } export default App;
다음 단계에 따라 React 애플리케이션에서 Redux Toolkit을 설정하여 예측 가능하고 유지 관리 가능한 방식으로 상태를 관리할 수 있습니다. Redux Toolkit은 Redux로 작업할 때 많은 일반적인 작업을 단순화하여 Redux 로직을 더 쉽게 작성하고 유지 관리할 수 있도록 해줍니다.
Redux Toolkit 및 React에 대해 더 자세히 알아보고 싶은 분들을 위해 다음과 같은 유용한 리소스를 제공합니다.
읽어주셔서 감사합니다!
포
위 내용은 React와 함께 Redux 툴킷 사용하기: 간단한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!