介绍
嘿，那里ð，我认为您正在尝试使用React设置Redux工具包。不用担心！这会有点不知所措，但我在这里为您提供帮助！
首先，Redux Toolkit是一个库，可以简化与React应用程序使用Redux的过程。它提供了许多工具和方便的方法来通过React应用程序进行REDUX，因此您不必担心庞大的样板和重复的任务。
我对Redux的看法
我不会继续解释redux本身的概念。 [检查Redux文档以获取更多信息]。我在这里告诉您有关Redux的一些重要观点：
- redux是国家的全球商店。
- REDUX可能并不是所有项目的强制性。
- 您可以使用Redux Toolkit（RTK）避免道具钻探[通过太深]。
仍然对Redux-toolkit混淆了？只需想到反应中的国家即可。你记得？ ，Redux提供可以从任何地方访问的状态。
不要灼伤你的头。请记住：
Redux is the global store of States.
您在React状态下做了什么？请记住values和setValues这样：
//Initialize states
const [value,setValues]= useState(0); //initial Value
//accessing values
console.log(value);
//updating values
setValues(1);
您是否记得这个概念？完全像这样，将其作为selector并将其设置为dispatch。
我认为此插图对您有帮助。有关更多信息，请查看此Documentation。
执行
让我们跳过这个理论。然后，您便安装DevTools for Redux。
edge和chrome的DevTool插件链接。
安装
您需要安装两个软件包：
npm i @reduxjs/toolkit react-redux
创建一个Redux商店
src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
export default configureStore({
reducer: {},
});
configurestore
我想稍微解释configurestore。如果您想要完整的详细说明。查看Documentation。
Steps for Configure Store.
configureStore具有七个属性。
- 还原器
- 中间件（可选）
- DevTools（可选）
- 预加载（可选）
- 增强剂（可选）
我不会解释所有这些。我没有所有的经验。
reducers，devtools和preloadedstate是最重要的，并且经常使用。
减少了Devols
成功在浏览器上安装了Redux开发工具后。看起来如上所述。
去单击Redux选项卡。
看起来像这样。如果我们通过项目实施了Redux。
包括redux商店到app.jsx parent
这使您的整个应用程序访问商店。
// hidden for simplicity
import { Provider } from 'react-redux';
import store from './app/store';
// hidden for simplicity
<Provider store={store}>
<App />
</Provider>
// hidden for simplicity
创建一个redux状态切片
创建切片的主要思想将产生用于调度和还原的动作，我们将在Configurestore中使用。
features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'
现在，让我们定义plinterslice的初始状态并用还原器导出。
import { createSlice } from '@reduxjs/toolkit'
const initialState = {
value: 0,
}
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
// Redux Toolkit allows us to write "mutating" logic in reducers. It
// doesn't actually mutate the state because it uses the Immer library,
// which detects changes to a "draft state" and produces a brand new
// immutable state based off those changes
state.value += 1
},
decrement: (state) => {
state.value -= 1
},
incrementByAmount: (state, action) => {
state.value += action.payload
},
},
})
注意：官方redux-toolkit的示例。
在上面的示例中，我们创建了三个还原器。我的意思是动作increment，decrement和incrementByAmount。
现在导出所有这些动作（还原器），以便我们可以使用它们来更改状态值。
//all the above goes lies the same
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer
在商店中添加切片还原器。
接下来，我们需要从ounterslice导入还原功能并将其添加到我们的商店中。
app/store.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'
export default configureStore({
reducer: {
counter: counterReducer,
},
})
在React组件中实施使用乘积和二手级
现在，我们可以使用useSelector从商店读取数据，并使用useDispatch读取派遣动作。
让我们创建一个称为Counter.jsx的组件，然后将此组件渲染为App.jsx。
components/Counter.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
export function Counter() {
const count = useSelector((state) => state.counter.value)
const dispatch = useDispatch()
return (
<div>
<div>
<button
aria-label="Increment value"
onClick={() => dispatch(increment())}
>
Increment
</button>
<span>{count}</span>
<button
aria-label="Decrement value"
onClick={() => dispatch(decrement())}
>
Decrement
</button>
</div>
</div>
)
}
现在让我们在App.jsx中导入和渲染。
App.jsx
import './App.css'
import { Counter } from './components/Counter'
export default function App() {
return (
<main>
<Counter />
</main>
)
}
恭喜您已使用react完成了完整的Redux-Toolkit设置。
和最终项目看起来像这样.....
现在，每当您单击Increment和Decrement按钮时：
- 相应的Redux操作将被派往商店。
- 柜台减少器将看到动作并更新其状态。
-
<Counter>组件将从商店中看到新的状态值，并使用新数据重新渲染自己。
Source Code
随时提出任何问题ðââ€，并留下您的评论。