什么是redux？
redux是用于JavaScript应用程序的可预测状态容器，而不限于反应，您知道吗？它提供了一种管理应用程序状态的集中式且可预测的方法，从而在流入不同组件时更容易跟踪和更新数据。 Redux遵循通量建筑的原则，强调了真理和不变性的单一来源。通过维护全球商店并使用还原来处理状态变化，Redux有助于简化复杂的数据流，提高调试功能并促进有效的应用程序开发。
通过建筑学习
我们要建造什么？
一个简单的计数器应用程序显示计数值和一个功能以更新计数值。
我们将学习如何访问Redux存储的状态值（我们将在其中看到选择器如何在行动中起作用），然后转到某些状态更新部分（我们将在其中增加或减少值使用按钮的计数，我们将在其中看到调度）。
要求：
-
JavaScript：对JavaScript基本面的深入了解，包括变量，功能，对象，数组和ES6功能。
-
react：熟悉反应基础，例如组件，状态，道具和生命周期方法。
-
状态管理：了解管理应用程序状态的基础知识，包括单向数据流的概念。
-
通量结构：Redux所基于的对通量架构模式的高级理解。 （本教程并不是真正需要的，但很高兴）
-
异步JavaScript：异步JavaScript概念的知识，例如承诺和异步/等待。 （本教程并不真正需要）
安装
-
打开命令提示符并导航到要创建项目的目录
-
使用Create React App
启动React应用程序
npx create-react-app counterapp
cd counterapp
- 现在让S安装REDUX软件包
npm install @reduxjs/toolkit
npm install react-redux
-
就是这样。现在您准备在React应用中使用Redux。
-
只需键入npm启动命令提示
第一部分：商店，切片，访问状态价值
让我们马上开始。
我不知道您，但是我想完全清除SRC文件夹，因为不需要大多数文件夹。
创建index.js＆app.js文件
创建一个名为index.js的文件src文件夹＆粘贴以下
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './app/store';
ReactDOM.createRoot(document.getElementById('root')).render(
<Provider store={store} >
<App />
</Provider>
);
说明：提供商组件包装了应用程序组件，使整个应用程序都可以访问Redux Store。它需要一个商店的道具，这应该是Redux Store实例。
创建另一个名为app.js的文件src文件夹和插入
import Counter from "./components/Counter";
export default function App() {
return (
<Counter />
);
}
在这里，如果您是Redux的新手，事情会变得有些棘手。商店，切片，选择器和调度等概念可能会使您感到困惑。这需要时间，您应该真正看到一切在每个步骤中的工作方式。
创建商店
在Redux中，该商店是一个核心概念，可作为持有应用程序状态的集中容器。它是整个应用程序数据的真实来源。该商店管理状态并提供与之互动和更新的方法。
在SRC目录和应用程序目录中创建一个名为应用的文件夹，创建一个名为store.js＆Insert的文件
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../components/counterSlice'
export default configureStore({
reducer: {
counter : counterReducer
}
})
说明：我们正在使用 @reduxjs/toolkit库中的configurestore函数创建和导出redux商店。还原器还没有从切片中导出，但我们会尽快到达。
创建切片
在Redux中，切片是Redux Toolkit（Redux for Redux的一组）引入的概念，可帮助组织和封装状态的相关部分以及相应的还原器和动作。
。在SRC目录内部创建一个名为组件的文件夹，在其中，创建一个名为Counterslice.js＆Insert的文件
import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0
}
})
export default counterSlice.reducer
说明：一个切片需要字符串中的唯一名称才能识别它们。我们可以在切片内设置初始状态值和还原器，但是在这里，我们没有设置任何还原器，我们将在更新计数时很快设置。
创建我们的组件以查看结果
在组件文件夹中创建另一个称为counter.js的文件
import React from 'react'
import { useSelector } from 'react-redux'
const Counter = () => {
const count = useSelector(state => state.counter.value)
return (
<div>
<p>Count: {count}</p>
</div>
)
}
export default Counter
说明：使用useElector钩子从Redux Store状态的计数器切片中选择和提取值属性。它订阅了该特定状态切片的组件。
输出
Count: 0
第二节：还原和二手数
现在，我们已经了解了如何访问Redux商店中存储的状态值，让我们转向如何使用还原器和usedispatch挂钩更新状态。
定义还原器
修改counterslice.js看起来像这样
import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0
},
reducers: {
increment: state => {state.value += 1},
decrement: state => {state.value -= 1},
}
})
export const {increment, decrement} = counterSlice.actions
export default counterSlice.reducer
说明：在这里，我们宣布了两个减少量的减少＆减少，这些减少只是通过增加或降低过去状态来返回更新的状态价值。另外，请参见将还原器导出为操作，因为它们是二手挂钩以更新状态所需的操作。
使用usedispatch（）钩
另外，修改counter.js文件
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import './counter.css'
const Counter = () => {
const count = useSelector(state => state.counter.value)
const dispatch = useDispatch()
return (
<div className='box' >
<p className='count'><span>Count: </span>{count}</p>
<div className=' btn ' >
<button onClick={() => dispatch(increment())} >Add</button>
<button onClick={() => dispatch(decrement())} >Subtract</button>
</div>
</div>
)
}
export default Counter
说明：在这里，我们使用了二手挂钩来处理事件。而且，我已经采用了一些基本风格。到目前为止，所有代码以及样式文件都可以在我的github repo here中找到。
结果应该像这样。
结论
通过遵循本分步指南，您应该对Redux概念（包括商店，切片，动作，还原器，还原和与React组件连接的Redux连接）有了可靠的了解。您应该能够应用这些知识来构建更复杂的Redux供电应用程序并在其项目中有效管理状态。
记住，Redux是国家管理，提供可预测性，集中式状态和强大开发人员工具的强大工具。它最初可能会引入一些额外的复杂性，但是一旦掌握，它可以大大提高JavaScript应用程序的可维护性和可伸缩性。