react简单入门- redux的简单使用（Redux Toolkit版本）新版

前言：
本文很长，但是我相信你只要坚持看完，必定会有所收获的。

• 概述：Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。
• 拓展：首先要明白Redux 并不是一只能和React一起使用，它同样还支持其它界面库。它体小精悍（只有2kB，包括依赖），却有很强大的插件扩展生态。

核心点（标红的是最主要的）：

• state：状态
• reducer：监控
• store：仓库
• action：行为

其实在使用redux的时候，你可以试想一个场景，store是一家银行，reducer是前台，state是你在这家银行所存的钱，action是你要去这家银行所想要做的操作，你有权利查看你的余额（state），但是你没有权利直接修改你的余额（不然我就直接修改成1000000…¥，那还得了？！），但是你可以去找前台（reducer），告诉他，你要存100块，或者我要取50块出来，而这些其实就是action，前台知道了，他就会根据你的需求来修改得到一个你新的余额，然后再把这个新的余额，告诉银行（store），这样银行就能把你旧的余额替换成新的余额。其大致内容如下：

demo演练：

1. 创建action

*注意：action本质其实就是一个对象

前面我也提到过redux是一个提供可预测的状态管理，既然是可预测的那说明你要提前说明你未来可能会有的一些操作，所以说你需要列出你的行为，比如未来我可能会有存钱和取钱的操作，就如下：
type：表示你的行为的类型；payload：表示载核，就比说，你存钱，那你总的告诉前台你要存多少吧，同理你取钱也要告诉前台取多少吧，这个payload就指的是多少的意思，但是现在你是不知道你未来要存多少还是要取多少的，所以我们就以action创建函数的形式来表示，如下：

这样你就可以动态的去表示了，但是这还存在一个问题，就是以后未来我的action一旦多了的话，那我岂不是要写很多个这样的函数？所以说，这里可以引入Redux Toolkit包里的一个方法createAction，以后的话就可能直接这样写了：

两行代码搞定，并且我打印了下这个存钱行为：
发现其实这个createAction方法它返回的是一个函数，而这个函数其实就是我们刚才写的那两个action创建函数，只不过它这里面肯定没我写的那么简单，只不过做了更复杂的逻辑和更多复杂场景罢了，但最后，这个函数执行之后，始终是一个对象，即action，这样应对了我们一开始就提到了action本质就是一个对象，要证明的话，无非就是把我们通过Redux Toolkit包中的createAction生产出的action创建函数给执行一下不就行了嘛，就比如我未来要存一百块，就如下：

打印结果：

这样你会发现还是和我们之前一开始写的action对象一摸一样，type代表类型，payload代表你要给这个存钱action传的参数。代表你要存多少钱

2. 创建reducer

第二步就是要创建出我们reducer（前台）了，咱们直接看代码吧：

*注意：reducer本质上是一个函数，它应该是带有两个参数的（state、action），有state参数才能知道你旧的状态是什么，即你之前在该银行有多少钱，而reducer的目的其实就是内部就是判断你未来可能会有哪些行为( action )，来返回不同的newState，来告诉银行，并更新你的state，也许有可能会有人说为什么我不直接这样子呢：
其实这样干的话本身就不满足我们redux的初衷（其规则确保状态只能以可预测的方式更新），需要满足要在可预测的方式更新，如果像上面这样直接修改state里面的值的话，那我想增加就直接增加，还要什么reducer啊，下面我将列出reducer的规则：

3. 创建store

这个的话就简单，直接使用Redux Toolkit，包里configureStore方法就行了，如下：

一行代码就可以了，只需要给这个函数传一些配置信息即可，比如你自定义的reducer，当然其实Redux Toolkit包里面还有关于创建reducer的方法，帮你更加规范化，但这里我就不细讲了。

*然后的问题就是，我在最开始的时候讲了一个银行取钱的场景，其中我说过我自己本身是具有查看我的余额的权限的，所以我们创建出来的这个store就有个getState方法，就是用来查看自己的状态的，如下：
*那我们又如何存钱和取钱呢？其实只需要用store提供的dispatch方法，并传入你要你要做的行为，比如我要存钱，就如下：
同理，你要取50块钱的话就是store.dispatch(reduceTodoAction(50))即可，把你想要的做的action表达出来，这样reducer才好跟新的你state，要了解跟多，请看下官网，后续我也会将发布更加新的其他知识。

总结：

问题：为什么要引入redux呢？
回答：
1、现实！技不压身
2、给我们跨组件的通信带来了方便，如下：

3、当然这个redux是否要用，还是取决于你的需求，而并不是说你会了这个就一定要用在项目当中，也不能说因为卷而要学会这门技术，我们应该掌握他的思想，朝钱看🤪嘛，朝未来看，下面是你是否需要用到redux的某些场景：