我们已经知道 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中文网其他相关文章!