Redux Toolkit은 애플리케이션에서 Redux를 설정하는 프로세스를 단순화하는 독선적이며 강력한 공식 라이브러리입니다. Redux는 매우 강력하지만 상태 관리, 액션 생성 및 리듀서를 처리하기 위해 많은 상용구 코드가 필요할 수 있습니다. Redux 툴킷(RTK)은 일반적인 작업을 단순화하는 유틸리티 기능 세트를 제공하여 Redux 개발을 더욱 쉽고 효율적으로 만들 수 있도록 설계되었습니다.
Redux Toolkit을 사용하면 더욱 간결하고 체계적인 방식으로 저장소를 구성하고, 리듀서를 작성하고, 작업을 정의할 수 있습니다. 또한 개발자가 흔히 발생하는 실수와 상용구 코드를 방지하는 데 도움이 되는 몇 가지 기본 설정도 포함되어 있습니다.
Redux Toolkit은 Redux 로직을 보다 구조화되고 간결하며 사용자 친화적인 방식으로 작성하기 위해 권장되는 공식 라이브러리입니다. 불변 상태 업데이트를 자동으로 처리하고 액션 생성자와 리듀서를 단순화하는 등 Redux 설정의 복잡성을 줄이는 유틸리티를 제공하여 반복적인 코드의 필요성을 없애는 데 도움이 됩니다.
Redux Toolkit은 Redux 사용을 간소화하기 위한 여러 내장 기능과 유틸리티를 제공합니다.
configureStore는 비동기 작업을 위한 redux-thunk와 같은 필수 미들웨어를 자동으로 추가하고 디버깅을 위한 Redux DevTools를 설정하여 스토어 구성을 단순화합니다.
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
const store = configureStore({
reducer: {
counter: counterReducer,
},
});
export default store;
createSlice는 Redux 상태의 일부를 나타내고 리듀서와 액션을 모두 포함하는 Redux 슬라이스 생성을 단순화하는 유틸리티입니다.
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => {
state.value += 1; // Direct mutation allowed due to immer.js under the hood
},
decrement: (state) => {
state.value -= 1;
},
incrementByAmount: (state, action) => {
state.value += action.payload;
}
}
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
createAsyncThunk는 API에서 데이터를 가져오고 이를 Redux 상태에 통합하는 등의 비동기 논리를 처리하기 위한 도구입니다. 비동기 흐름을 관리하기 위해 일련의 작업 생성자(보류 중, 이행 및 거부 상태)를 생성합니다.
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
const store = configureStore({
reducer: {
counter: counterReducer,
},
});
export default store;
createEntityAdapter는 Redux에서 정규화된 데이터를 관리하는 유틸리티입니다. 항목 목록과 같은 데이터 모음을 효율적으로 처리하는 데 도움이 됩니다.
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => {
state.value += 1; // Direct mutation allowed due to immer.js under the hood
},
decrement: (state) => {
state.value -= 1;
},
incrementByAmount: (state, action) => {
state.value += action.payload;
}
}
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
RTK는 Redux를 설정하는 데 필요한 상용구 코드의 양을 크게 줄입니다. 액션 유형, 액션 생성자, 리듀서를 수동으로 작성하는 대신 이제 createSlice를 사용하여 모든 것을 자동으로 생성할 수 있습니다.
RTK는 내부적으로 Immer.js를 사용하여 리듀서에 "변형" 코드를 작성할 수 있습니다. 그러나 Immer는 상태의 복사본을 자동으로 생성하고 이에 변형을 적용하여 상태가 불변성을 유지하도록 보장합니다.
redux-thunk와 같은 미들웨어를 자동으로 구성하고 Redux DevTools와 통합함으로써 Redux Toolkit을 사용하면 Redux 상태를 더 쉽게 디버깅하고 모니터링할 수 있습니다. RTK는 유형 안전성을 크게 지원하므로 TypeScript와 같은 도구를 쉽게 사용할 수도 있습니다.
createAsyncThunk 기능은 복잡한 비동기 논리를 관리하고 이를 Redux 상태에 원활하게 통합하여 비동기 작업 관리의 복잡성을 줄여줍니다.
RTK는 정규화된 데이터 처리를 위해 createEntityAdapter와 같은 유틸리티를 제공합니다. 이는 Redux에서 대규모 데이터 세트(예: 사용자 목록, 제품 등)를 관리하는 데 특히 유용합니다.
다음은 React 앱에서 Redux Toolkit을 설정하기 위한 기본 가이드입니다.
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
export const fetchData = createAsyncThunk(
'data/fetchData',
async (url) => {
const response = await fetch(url);
return response.json();
}
);
const dataSlice = createSlice({
name: 'data',
initialState: { items: [], status: 'idle' },
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchData.pending, (state) => {
state.status = 'loading';
})
.addCase(fetchData.fulfilled, (state, action) => {
state.status = 'succeeded';
state.items = action.payload;
})
.addCase(fetchData.rejected, (state) => {
state.status = 'failed';
});
}
});
export default dataSlice.reducer;
createSlice를 사용하여 특정 상태에 대한 작업과 감소기를 모두 포함하는 Redux 슬라이스를 정의하세요.
import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
const usersAdapter = createEntityAdapter();
const usersSlice = createSlice({
name: 'users',
initialState: usersAdapter.getInitialState(),
reducers: {
addUser: usersAdapter.addOne,
removeUser: usersAdapter.removeOne,
}
});
export const { addUser, removeUser } = usersSlice.actions;
export default usersSlice.reducer;
다음으로,configureStore를 사용하여 Redux 스토어를 구성합니다.
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
const store = configureStore({
reducer: {
counter: counterReducer,
},
});
export default store;
react-redux의 Provider 구성 요소로 앱을 래핑하여 애플리케이션 전체에서 Redux 스토어를 사용할 수 있게 만드세요.
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => {
state.value += 1; // Direct mutation allowed due to immer.js under the hood
},
decrement: (state) => {
state.value -= 1;
},
incrementByAmount: (state, action) => {
state.value += action.payload;
}
}
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
Redux Toolkit은 상용구 코드를 제거하고 createSlice, createAsyncThunk 및configureStore와 같은 유틸리티 기능을 제공하여 Redux 작업 프로세스를 단순화합니다. RTK를 사용하면 개발자는 Redux 구성의 복잡성에 대해 걱정하지 않고 애플리케이션의 핵심 로직에 집중할 수 있습니다.
RTK를 사용하면 보다 효율적이고 유지 관리가 쉬운 방식으로 동기 및 비동기 상태를 모두 관리할 수 있으므로 대규모 React 애플리케이션에 탁월한 선택입니다.
위 내용은 Redux 툴킷 마스터하기: React 앱에서 상태 관리 단순화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
