当前位置：首页 > news >正文

redux

news 来源：原创 2025/6/19 20:07:26

1.redux是什么

1.redux是一个用来做状态管理的js库

2.可以用在react，vue等项目，但基本和react配合使用

3.作用：集中式管理react应用中多个组件共享的状态

2.什么情况下需要用redux

1.某个组件的状态，需要让其他组件随时拿到

2.一个组件需要改变另一个组件的状态

3.总体原则，能不用就不用，不用会毕竟吃力可以考虑使用。

比如一个例子，我们希望B组件状态E组件要用，我们怎么去做到呢?

1.b给app app给e 通过props

2.消息订阅 E订阅 B发布

如果D的状态所有的组件都要用,那么上面两种方法显然会非常麻烦。

或者这种，D组件里面的a b所以的组件希望随时用，这时候就需要用redux了。

3.redux工作流程

那么redux是怎么实现这个共享效果呢。或者说我们怎么把组件的状态保存到redux，然后其他组件之间去操作改变状态。

右下角我们通过这个简单的案例来实现。我们先来解析图片。

action的创建者们 action? (在redux里面叫动作对象，包含本次动作的类型以及操作的数据)比如 + 2 在这里就是动作类型 + 操作的数据2.这里action只是一个对象，属性 type， data。

分发（翻译）这里是函数，调用之后才会进行后面的步骤，也就是提交给后面的步骤。

这里创建出的action是给其他的地方用，dispatch （分发）传给后面的步骤

存储，商店。负责全局的掌控（在redux里面）。相当于交警，控制步骤进行。这里dispatch 把action给store 然后store（中枢）把action和初始state给reduces，真正加工的是reducers（加s说明有很多个）然后返回更新后的state（通过我们action操作）给store，然后组件用getState（）得到新的state。

整个流程跑通了，reducers是加工状态，谁初始化状态？，也就是这个流程是第二次进行的。reducers可以初始化状态。最多的是加工状态，只做一次初始化状态。此时的流程是加工逻辑，这没有初始化，previousstate是undefined，所以在初始化的时候previousstate是undefined 后面加工逻辑才有值。

我们用例子来解释流程。

去餐厅的客人，点了一盘蛋炒饭。

服务员，记录蛋炒饭--一份

点餐宝，输入类型type是点餐，data是一份蛋炒饭。

老板拿到数据，给后厨数据data 一份蛋炒饭以及类型是点餐。初始数据现在没有是undefined

后厨知道previous是undefined，然后做一份蛋炒饭，把stata从undefined变成一份蛋炒饭传给store，

客人通过getState方法取餐。

4.redux在案例的简单使用

用redux实现案例之前，我们需要知道reducers以及store是怎么在引入redux库之后使用的。

首先reduce是一个纯加工函数，store是一个createStore创建就好了，这两个js文件都需要在redux文件夹里面保存，然后在这个案例里面怎么书写呢。

通过这两个js文件里面的代码编译后，我们成功搭建了redux中的store以及count组件对应的加工函数reducer。我们就可以在我们的组件中通过给store传参数，然后store传给reducer加工，给我们返回加工后的状态了。

这是实现案例效果的代码，这里值得注意的点是，store里面有很多api，我们用getState()api之间可以获得reducer的返回值中的状态，至于我们传递action对象，直接通过store.dispatch（{type:'',data:}），用key value的形式传过去。然后我们reducer就会自动匹配对应的type然后执行对应的+功能，这里的异步以及奇数，都需要我们在传递的时候定义，而reducer加工就只是负责加工就可以了。

还有一个注意点，redux在调用api修改成功状态后并不会更新页面重新渲染，所以我们这时候虽然preState变了但是页面没有重新加载。

我们这时候用类组件的声明周期componentDidMouunt(){this.setState({})} ，这里我们利用更新state方法会重新渲染页面。我们也可以用下面的方法。