p2p做网站,网站WordPress站点,网站开发的常用流程,免费注册商标您将学到什么 如何设置并使用 Redux Toolkit 和 React-Redux 先决条件 熟悉ES6 语法和功能了解 React 术语#xff1a;JSX、State、Function Components 、 Props和Hooks理解Redux 术语和概念 1、基本使用
1.1、安装 Redux Toolkit 和 React- Redux
将 Redux Toolkit 和 Rea… 您将学到什么 如何设置并使用 Redux Toolkit 和 React-Redux 先决条件 熟悉ES6 语法和功能了解 React 术语JSX、State、Function Components 、 Props和Hooks理解Redux 术语和概念 1、基本使用
1.1、安装 Redux Toolkit 和 React- Redux
将 Redux Toolkit 和 React-Redux 包添加到您的项目 npm install reduxjs/toolkit react-redux 1.2、创建一个 Redux Store
创建一个名为 的文件src/store/index.js。从 Redux Toolkit 导入configureStoreAPI。我们首先创建一个空的 Redux 存储然后将其导出 src/store/index.js import { configureStore } from reduxjs/toolkitexport default configureStore({reducer: {}
}) 这会创建一个 Redux 存储并自动配置 Redux DevTools 扩展以便您在开发时检查存储
1.3、引入store
Provider一旦创建了 store我们就可以通过在我们的应用程序周围放置一个 React-Redux 来使其可用于我们的 React 组件src/main.js。导入我们刚刚创建的 Redux store将一个放在Provider你的周围App并将 store 作为 prop 传递 main.tsx import React from react
import ReactDOM from react-dom/client
import App from ./App
import store from ./store
import { Provider } from react-reduxReactDOM.createRoot(document.getElementById(root)!).render(React.StrictModeProvider store{store}App //Provider/React.StrictMode,
)1.4、创建 Redux 状态切片 添加一个名为 的新文件src/store/counterSlice/index.js。在该文件中createSlice从 Redux Toolkit 导入 API。 创建切片需要一个字符串名称来标识切片、一个初始状态值以及一个或多个 Reducer 函数来定义如何更新状态。创建切片后我们可以导出生成的 Redux 动作创建器和整个切片的 Reducer 函数。 Redux 要求我们通过复制数据并更新副本来将所有状态更新写成不可变的。但是Redux ToolkitcreateSlice和createReducerAPI 在内部使用Immer来允许我们编写“变异”更新逻辑使其成为正确的不可变更新。 import { createSlice } from reduxjs/toolkitexport const counterSlice createSlice({name: counter,initialState: {value: 0},reducers: {increment: state {console.log(increment,state)state.value 1},decrement: state {state.value - 1},incrementByAmount: (state, action) {state.value action.payload}}
})export const { increment, decrement, incrementByAmount } counterSlice.actionsexport default counterSlice.reducer 1.5、将切片操作添加store 接下来我们需要从计数器切片中导入 Reducer 函数并将其添加到我们的存储中。通过在参数中定义一个字段reducer我们告诉存储使用此切片 Reducer 函数来处理该状态的所有更新。 import { configureStore } from reduxjs/toolkit
import counterReducer from ./countAdd/counterSlice
export default configureStore({reducer: {counter: counterReducer}
}) 1.6、在组件中使用切片 现在我们可以使用 React-Redux 钩子让 React 组件与 Redux 存储交互。我们可以使用 从存储中读取数据useSelector并使用 调度操作useDispatch。创建一个src/features/counter/Counter.js包含组件的文件Counter然后将该组件导入App.js并在 内部渲染它App。 import React from react
import { useSelector, useDispatch } from react-redux
import { decrement, increment,incrementByAmount } from ../store/countAdd/counterSliceexport function Counter() {const count useSelector(state state.counter.value)const dispatch useDispatch()return (divdivbuttonaria-labelIncrement valueonClick{() dispatch(increment())}Increment/buttonspan{count}/spanbuttonaria-labelDecrement valueonClick{() dispatch(decrement())}Decrement/buttonbutton onClick{()dispatch(incrementByAmount(10))}测试/button/div/div)
} 现在无论何时单击“增加”或“减少”按钮 相应的 Redux 动作将被发送到 store计数器切片器将看到操作并更新其状态组件Counter将从存储中看到新的状态值并使用新数据重新渲染自身 1.7、总结 以上是关于如何设置和使用 Redux Toolkit 与 React 的简要概述。回顾一下细节 概括 使用以下方法创建 Redux 存储configureStore -- 创建公共存储 configureStore接受reducer函数作为命名参数configureStore自动使用良好的默认设置来设置商店为 React 应用程序组件提供 Redux 存储 -- 挂载store存储存储传递到Provider 将 React-ReduxProvider组件放在你的App /将 Redux 存储传递为Provider store{store}使用以下代码创建一个 Redux “slice” ReducercreateSlice --创建切片并挂载在store上面 createSlice使用字符串名称、初始状态和命名的 Reducer 函数进行调用Reducer 函数可以使用 Immer “改变”状态导出生成的切片缩减器和动作创建器useSelector/useDispatch在 React 组件中使用 React-Redux hooks --- 组件中使用切片功能 useSelector使用钩子从 store 读取数据获取dispatch带有useDispatch钩子的函数并根据需要分派操作 2、调试工具
React DevTools 扩展 Chrome 的 React DevTools 扩展程序适用于 Firefox 的 React DevTools 扩展Redux DevTools 扩展 Chrome 的 Redux DevTools 扩展程序适用于 Firefox 的 Redux DevTools 扩展
