什么是redux？

redux主要解决了什么问题？它的工作原理是什么？

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。
redux是为了解决react组件间通信和组件间状态共享而提出的一种解决方案。
一、主要解决什么问题：
1、组件间通信
由于connect后，各connect组件是共享store的，所以各组件可以通过store来进行数据通信，当然这里必须遵守redux的一些规范，比如遵守 view -> aciton -> reducer的改变state的路径.
2、通过对象驱动组件进入生命周期
对于一个react组件来说，只能对自己的state改变驱动自己的生命周期，或者通过外部传入的props进行驱动。通过redux，可以通过store中改变的state，来驱动组件进行update.
3、方便进行数据管理和切片
redux通过对store的管理和控制，可以很方便的实现页面状态的管理和切片。通过切片的操作，可以轻松的实现redo之类的操作.

二、redux原理的实现
1、抽离store

将state与dispatch结合在一起，并且将其命名为store,然后再去构建一个函数createStore其目的就是专门用于生产state与dispatch

createStore里面有两个参数，第一个参数表示应用程序的状态，第二个是stateChanger用来描述会更具action来发生什么样子的变化

2、监控数据发生变化

在上面创建的createStore中第二个参数stateChanger就是去监控数据发生的变化，但是有个缺点就是之前写的方法需要手动的去更新，显然在实际的开发过程中，这种方式显然是不可取的。因此需要在stateChanger内部去添加这种制动更新的过程

要达到上面所说的自动更新还需要一个操作，那就是你要实时的去检测到这种变化，并且实时的更新数据，这个时候就使用store.subscript(listener)来实现这样的目的。

3、纯函数与共享性能提升

为什么会使用纯函数？在接触redux中的reducer中接触到的一个重要概念就是纯函数，为什么ruducer是一个纯函数呢，那就是因为我们想要达到一个效果，那就是接受一个state并且返回一个新的state，然后再将新的state存放到store当中。如果不采用纯函数，那样会造成的一个后果就是如果在你之前存入的数据中有可变的因素，那么在下一次你需要去使用里面的数据时，就会发生很多问题。

共享性能的提升，我们需要做到一个目的，那就是每次更新数据的时候，不需要去每次都去重新渲染整个页面的内容，只需要我们修改数据更改之后的数据。这样的好处是不言而喻的，能很明显的提高运行的速度，使最终的产品能够达到高效的过程。因此在对于stateChanger时，应使用下面的这种共享性能。

4、真正的reducer

其需要达到的目的是既能获取初始化数据的功能，又能生成更新后的数据，因此就有了下面的这段代码的产生。

5.最终版本的createStore

既然之前的reducer原理已经清楚明了，那么createStore就应该对reducer做出更加正确的反应。因而就得到了其最终的代码的原理

6、react-redux中connect原理的实现

其实connect的原理很简单，就是高级组件与context后而写成的，其功能是实现异步数据之间的传递。那么首先我们来实现一下只有一个mapStateToProps参数形式的connect，其代码如下

上面形式显然在实际的过程中是不可取的，因为此种方式去连接state是不准确的，因为…stateProps只反应有状态组件中的数据连接方式，其二是获取更新数据，每一次执行用于不同的操作时，要自动的去渲染并且连接到实时的数据。因此在这里我们采用下面的这种形式

显然这样的connect是不合理的，因为这里你连接的只是state，关于异步数据之间的操作并没有进行连接，因此在此时我们需要重新的再去更新connect的写法

什么是Redux?

Redux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器，用于整个应用的状态管理。使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为

Redux遵循的三个原则是什么？

单一事实来源：整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。
状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state是数据的最小表示一样，该操作是对数据更改的最小表示。
使用纯函数进行更改： 为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。

你对“单一事实来源”有什么理解？

Redux 使用 “Store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序.

列出 Redux 的组件

Action – 这是一个用来描述发生了什么事情的对象。
Reducer – 这是一个确定状态将如何变化的地方。
Store – 整个程序的状态/对象树保存在Store中。
View – 只显示 Store 提供的数据。

如何在 Redux 中定义 Action

React 中的 Action 必须具有 type 属性，该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量，并且还可以向其添加更多的属性。在 Redux 中，action 被名为 Action Creators 的函数所创建.

解释 Reducer 的作用

Reducers 是纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态.

Store 在 Redux 中的意义是什么

Store 是一个 JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。

Redux 有哪些优点？

Redux 的优点如下：
结果的可预测性 - 由于总是存在一个真实来源，即 store ，因此不存在如何将当前状态与动作和应用的其他部分同步的问题。
可维护性 - 代码变得更容易维护，具有可预测的结果和严格的结构。
服务器端渲染 - 你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验.
开发人员工具 - 从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。

总结

redux的作用
独立的变量存储库，实现同一URL页面不同资源文件（组件）之间变量共享。
redux（window）只能支持单页面不同资源文件（组件）之间变量共享。

Redux 存储的变量值是存储在浏览器的 window 对象。这使得 Redux状态可以在页面的不同资源文件部分中共享，并且可以在开发者工具中进行调试。如果你需要持久化状态，你可以使用特定的中间件将状态保存到本地存储LocalStorage、Cookie和SessionStorage中。

• 一个URL页面窗口一个window对象。
• window对象生命周期和浏览器标签页开闭有关，window对象只能共享于同一页面的不同资源文件之间通信。
• 标签页面窗口的刷新，新增，关闭会导致window对象重新创建，新增和销毁。
• 不同标签页的window对象不能共享：浏览器同时打开csdn页面和pornhub页面，两者window对象肯定不能共享通用。

原因：
1、独立的执行上下文：每个页面都有自己的执行上下文，这意味着在一个页面中定义的变量、函数和对象在另一个页面中是不可见的。
2、不同的 DOM树：即使两个页面加载的是同一个 HTML，它们的 DOM 树也是独立的。在一个页面上的 DOM 修改不会影响到另一个页面上的 DOM。
3、独立的 JavaScript 作用域：在两个不同的页面中，即使变量名称相同，它们也属于不同的 JavaScript作用域，因此它们的值是独立的。

实战经验

多文件共用一个reduce场景，各页面监控reduce中值变化并触发操作。
例如：antd3.X中多Form实例页面文件监控弹窗值进行初始化操作。
页面A的componentDidUpdate(prevProps, prevState, snapshot)和页面A的props存储redux中state值变化配合可以实现redux中值更新触发页面A的各种操作。

componentDidUpdate(prevProps, prevState, snapshot)导致的无限递归问题
当组件的 props或 state 发生变化时会触发该函数。 首次渲染不会执行此方法会执行componetDidMount()。 你也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语句里否则setState会导致再次触发渲染周期的componentDidUpdate导致无限递归。
条件语句通常是setState的变量；prexxx.key!=xxx.key

在 React 中，componentDidUpdate(prevProps, prevState, snapshot)
是一个生命周期方法，用于在组件更新后执行某些操作。它会在组件更新后立即被调用，但是不会在组件首次渲染时触发。
这个方法接收三个参数：
prevProps: 表示组件更新前的 props 对象。
prevState: 表示组件更新前的 state 对象。
snapshot:是在 getSnapshotBeforeUpdate 生命周期方法中返回的值。
它表示更新前的 DOM 状态，在组件更新后可以用于处理一些与DOM 相关的操作。 这些参数的作用如下：
通过比较 prevProps 和当前的 this.props，您可以确定 props 是否发生了变化，并根据需要执行相应的操作。
通过比较 prevState 和当前的 this.state，您可以确定 state 是否发生了变化，并根据需要执行相应的操作。 snapshot 可以用于处理一些在组件更新后需要基于 DOM 状态进行的操作，例如处理滚动位置或其他 DOM 变化。
总之，这些参数提供了一个机会，在组件更新后执行一些特定的操作，以响应 props 或 state 的变化，并且可以在操作中利用之前的 props、state 或 DOM 状态。
————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                     原文链接：https://blog.csdn.net/qq_43813373/article/details/130202395