我们已经知道 redux 是 JavaScript 应用程序的一个强大的状态管理库，特别是在使用 React 时。
但是使用 redux 很困难，因为它设置 redux 的代码很繁重。这使得维护和调试变得困难。这就是 Redux Toolkit 可以提供帮助的地方。
Redux 工具包解决的问题
Redux 工具包是官方推荐的编写 redux 逻辑的方法。它提供了一组工具来简化开发，减少样板代码，有助于提高应用程序的可扩展性和可维护性。
Redux 工具包的主要优点：
我们可以将 redux 工具包与任何 javascript 库一起使用，因此我们使用 React 设置 redux 工具包。
在 React 应用程序中设置 Redux 工具包
第 1 步：创建一个新的 React 项目
首先，让我们创建一个新的 React 应用程序。您可以使用 create-react-app 或 Vite 来实现此目的。为了简单起见，我们将在这里使用 create-react-app。
npx create-react-app redux-toolkit-example cd redux-toolkit-example
第 2 步：安装 Redux 工具包和 React-Redux
接下来，安装必要的软件包：@reduxjs/toolkit 和react-redux。
npm install @reduxjs/toolkit react-redux
切片是针对应用程序特定功能的 Redux 减速器逻辑和操作的集合。 Redux Toolkit 提供了 createSlice 函数来帮助使用最少的样板创建状态切片。
第 1 步：创建切片
让我们创建一个简单的计数器切片。在 features/counter 目录中创建一个名为 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;
在这里，我们定义了一个名为 counter 的切片，它具有初始状态和三个减速器（increment、decrement 和incrementByAmount）。 createSlice 函数会自动为每个reducer 函数生成动作创建者。
现在我们有了切片，让我们配置 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 应用程序包装在react-redux 的组件中并将其传递给商店。更新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 钩子从 store 访问状态
// 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;
在这一部分中，我们介绍了在 React 应用程序中设置 Redux Toolkit 的基础知识，包括创建切片、配置存储以及使用钩子将组件连接到 Redux 存储。在下一部分中，我们将深入研究使用 createAsyncThunk 处理异步逻辑，以从 API 获取数据并管理不同的加载状态。
敬请关注第 2 部分：高级 Redux 工具包 - 使用 createAsyncThunk 的异步逻辑！
以上是完整的 Redux 工具包（第 1 部分）的详细内容。更多信息请关注PHP中文网其他相关文章！
