1.react入门之react全家桶
2.react-router、react-redux、antd（Layout）
3.如何调试react-redux
4.Redux 入门教程（三）：React-Redux 的源码用法
5.Immutable.js与React,Redux及reselect的实践
6.redux与react-redux

react入门之react全家桶

       react全家桶中的关键组件包括Redux、react-redux、解析redux中间件、源码store模块化、解析Mobx状态管理、源码react-router基本使用以及页面懒加载。解析起动前源码下面我们将分别介绍这些组件的源码作用、用法以及如何在项目中集成它们。解析

       Redux是源码JS应用的状态容器，提供可预测的解析状态管理。使用Redux的源码步骤包括创建store、创建actions、解析创建reducers以及将store与应用连接起来。源码通过store，解析我们可以统一管理应用中的源码状态，确保状态的一致性和可预测性。案例包括store.jsx、main.jsx和ReduxTest.jsx。

       react-redux使得使用Redux变得更加优雅。在Redux的基础上，使用react-redux可以将Redux store与React组件进行连接，使状态管理更加便捷。案例同样包括store.jsx、main.jsx和ReduxTest.jsx。

       redux中间件在dispatch action的文件分割合并源码时机与action到达reducer之间提供额外的逻辑拓展点。它可以用于增强action处理、日志记录等。要使用redux中间件，首先需要安装`redux-logger`和`redux-thunk`，并遵循它们的使用方法。案例同样包括store.jsx、main.jsx和ReduxTest.jsx。

       store模块化通过将store进行模块化管理，可以实现更清晰、可维护的状态结构。具体示例包括index.jsx、constants.js、action counter.js和reducer counter.js。这里需要详细查看相关资料来了解模块化方案的实现。

       Mobx状态管理是通过透明的函数响应式编程使得状态管理变得简单和可扩展。Mobx与React结合，提供了一种简洁的状态管理解决方案。安装方法为`pnpm add mobx mobx-react -S`。案例包括mobx.jsx、MobxTest.jsx和main.jsx。

       react-router基本使用提供了路由管理功能，包括基本使用、二级路由、嵌套路由、棋牌游戏设计源码动态路由等。使用`react-router-dom`进行安装，代码实现包含在App.jsx、BookDetail.jsx、Reading.jsx等组件中。

       编程式导航使用useNavigate hook实现，点击即可返回主页。路由地址与路由参数通过useParams和useLocation获取。实现集中式路由管理使用useRoutes。

       页面懒加载使页面只在用户需要时加载，节省资源。通过调整import方式实现懒加载，例如在TestLazy组件中使用不同方法导入。

       路由守卫通过实现自定义逻辑来控制路由的访问，如在Access.jsx中实现访问控制。

       Umijs蚂蚁金服框架提供了企业级前端应用的完整解决方案，支持路由、插件、性能优化等特性。安装命令为`pnpm dlx create-umi@latest`，可以根据项目需求选择不同版本和配置。集成Prettier可以通过执行`pnpm umi g`来自动格式化代码。

       以上内容涵盖了react全家桶中各个组件的基本使用方法和集成示例，为开发者提供了从状态管理、开发跑腿系统源码路由管理到性能优化的全面解决方案。

react-router、react-redux、antd（Layout）

       æ–‡æ¡£ä¸­çš„简介：React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

        在我看来（我是做iOS开发的），这就像是 iOS 里面呢的 UITabbarController 和 UINavigattionController 的结合一样，控制着各个 ViewController 的跳转；不同的是react-router可以控制Route所在的位置，而iOS已经固定状态栏、导航栏、tabbar位置、高度，只能控制其隐藏和显示。

        文档中介绍：Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

        我的理解是：此组件是对 model 或 viewModel 进行管理，解放我们对 setState 的操作；同时实在管理的时候可以进行一些中间件（applyMiddleware）操作，如：loggerMiddleware 等。

        一个很丰富的UI组件库。题目中提到的 Layout 是我在开发过程中用到的布局样式。

        如果单独只用这些组件中的某一个，根据文档都可以做得很好。但是三者一结合使用，就有一些问题了。

       æˆ‘的做法是将 Route 放到 Content 里面，共用 header ，类似于 iOS 里面的 tabbar 一样。在 header 里面添加 Link 标签，控制其切换、跳转。

        此时会有一个问题，登录界面，并不要 header 的显示。于似乎，在经过多次尝试（可能并不是最优的），我在 index.js 的外层加了一个 Switch，将 index 放到 Route 里面。此处用 Window 命名是根据 iOS 开发里面的层级命名的，并不是js里面的window。

        在需要跳转登录界面的时候，this.props.history.replace("login")

        跳转下级路由的时候，this.props.history.push("detial")

        这就导致 react-router 的跳转出现了一些问题。this.props.history 为 undefine 。这样的话，就不能跳转了啊。

        尝试零：是不是在mapStateToProps方法里面把 history 给传丢了？补充一下，结果并不能解决。

        尝试一：在跳转的时候，window.location.href("llogin")，这样是可以实现的，但是每次页面都会刷新，react-router的意义何在？

        最终，在 react-router-dom 里面提供了 withRouter，将 withRouter 放到 connect 外面就好了。

        另外每个页面可能都需要一个 Provider，但是整个项目只能有一个 Router，所以并不能像 redux 文档 里面那样些写。而应该将 Router 放到 Provider外面（我是这么写的，而且可以用没警报。但不确定是百分之百有道理的）。

如何调试react-redux

       调试React-Redux的步骤如下：

       1. 配置开发和测试环境。

       2. 使用React开发者工具跟踪Redux的状态管理。

       3. 利用控制台检查错误和警告信息。

       4. 结合使用日志记录和状态快照工具进行调试。

       详细解释如下：

       配置开发和测试环境：在进行React-Redux的调试之前，确保你的开发环境已经配置妥当。这包括安装了React、Redux以及相关的依赖库。同时，为了模拟后端数据，你可能还需要设置一些模拟服务器或者使用API测试工具。良好的开发环境是顺利调试的基础。

       使用React开发者工具跟踪Redux的状态管理：React开发者工具是一个强大的工具，它允许你检查和跟踪Redux的状态变化。在浏览器的开发者工具中安装并启用React开发者插件后，你可以实时监控Redux的actions、reducers以及state的变化，这对于调试状态管理中的问题非常有帮助。

       利用控制台检查错误和警告信息：当代码中存在错误或异常时，浏览器控制台会显示出相应的错误信息。对于React-Redux应用来说，检查控制台中的警告和错误信息可以迅速定位问题所在。

       结合使用日志记录和状态快照工具进行调试：对于复杂的map类源码解析问题，可能需要结合日志记录和状态快照工具进行深入调试。通过日志记录，你可以追踪代码的执行流程；而状态快照工具则可以帮助你保存和对比不同时间点的应用状态，从而找到状态变化中的异常点。此外，还可以利用Redux中间件如`redux-logger`来帮助调试Redux的actions和state变化。

       遵循以上步骤，你可以更有效地进行React-Redux应用的调试，提高开发效率和代码质量。

Redux 入门教程（三）：React-Redux 的用法

       React-Redux是一个专门为React项目设计的库，它旨在简化Redux的使用，提供便利的同时也需要遵循一些额外的API和组件拆分规范。在本文中，我们将深入探讨如何在React项目中整合Redux，并通过使用React-Redux库来管理状态。

       在React-Redux中，组件被分为两大类：UI组件和容器组件。UI组件专注于界面呈现，而容器组件则负责状态管理与逻辑处理。UI组件不需要包含状态，通常被称为“纯组件”，其值完全由传入的参数决定。

       容器组件则相反，它们负责管理数据和执行业务逻辑。通常，一个组件会包含UI与业务逻辑，这时，将其拆分为容器组件和UI组件，容器组件负责外部通信，将数据传给UI组件，由UI组件呈现视图。

       React-Redux通过`connect()`方法将UI组件与容器组件连接起来。在使用`connect()`时，通常需要提供`mapStateToProps`和`mapDispatchToProps`两个函数。`mapStateToProps`用于将状态映射到UI组件的属性，而`mapDispatchToProps`则用于将用户对UI组件的操作映射成Action。

       `mapStateToProps`函数需要将状态对象映射到UI组件的属性对象，返回的对象包含了与UI组件交互的属性。例如，可以返回一个todos属性，用于获取可显示的todos列表。`mapDispatchToProps`则定义了哪些UI组件的操作应该作为Action传给Store。

       当使用`connect()`生成容器组件后，需要让容器组件获取到状态对象，这可以通过将状态对象作为参数传递，或者通过使用React-Redux提供的`Provider`组件来实现。`Provider`组件允许容器组件从上下文中获取到Store对象，使得子组件都能够访问到状态。

       本文以计数器组件为例，展示了如何使用React-Redux整合Redux。计数器组件作为UI组件，需要从状态中获取值，并通过事件触发Action。接着，定义了状态与计数器组件参数之间的映射关系，以及事件与Action的映射关系。使用`connect()`方法生成容器组件，并定义了相应的Reducer。最后，创建Store对象并使用`Provider`组件包裹根组件。

       此外，对于使用React-Router的项目，整合React-Redux与React-Router的流程与常规项目类似，主要是在Router组件外包裹`Provider`组件，确保所有组件都能访问到Store。

       总之，React-Redux通过简化状态管理与组件交互，使得在React项目中整合Redux变得更加直观与高效。通过正确使用`connect()`、`Provider`以及管理状态与组件之间的关系，开发者可以更专注于构建可维护与可扩展的React应用。

Immutable.js与React,Redux及reselect的实践

       欢迎访问我的个人博客- Immutable.js与React,Redux及reselect的实践

       本篇文章将聚焦Immutable与Redux：包括什么是Immutable，为什么需要使用Immutable，Immutable.js与React，Redux及reselect的组合实践及优化，最后总结使用Immutable可能遇到的一些问题及解决方式。

       什么是Immutable？

       Immutable来自于函数式编程的世界，可以称它为不可变。在编程中，我们经常需要修改数据，但Immutable提倡在修改数据时，创建新的对象，而不是改变原始对象。这样可以避免一些常见的编程问题，如：引用检查和值检查，提高代码的可预测性和可维护性。

       为什么需要使用Immutable？

       在React中，每次组件的props或状态改变时，React都会重新渲染组件，这在复杂的应用中可能会导致性能问题。而Immutable提供了一种方式，使得我们可以在不影响原始数据的情况下，改变数据结构。这样可以提高组件的性能，减少不必要的渲染。

       使用Immutable的实践

       在实际的开发中，我们可以将JavaScript对象转换为Immutable对象，然后在需要修改数据时，使用Immutable提供的API进行操作。在React中，我们可以将Immutable对象传递给组件的props，而不需要担心组件在渲染时会重新创建新的数据副本。

       如何使用Immutable？

       目前已经有了一些与React集成的库，如Immutable.js。我们可以通过使用Immutable.js来创建不可变的对象，并在需要修改数据时，使用Immutable.js提供的API。例如，我们可以使用Immutable.js的map()、reduce()等方法来创建React组件的子元素。

       Immutable与Redux的协作

       在使用Redux进行状态管理时，我们可以将状态树表示为一个不可变的对象。这样，我们可以使用Immutable.js提供的API来修改状态树，而不会影响到原始的状态对象。这样可以提高状态管理的效率，减少不必要的状态更新。

       使用Immutable的优化

       在使用Immutable时，我们需要注意一些细节。例如，我们可以在需要修改数据时，使用Immutable.js的API来创建新的对象，而不是直接修改原始对象。这样可以避免一些性能问题。另外，我们还可以使用reselect库来缓存一些选择器的计算结果，避免不必要的计算。

       在实际的开发中，我们需要注意一些问题，例如：Immutable与JavaScript对象之间的协作问题，Immutable的强依赖性，以及在使用Immutable时可能会遇到的性能问题等。在使用Immutable时，我们应该尽量避免这些问题，发挥其带来的优势。

redux与react-redux

        redux 与 react-redux 直接一起使用， 让我总分不清楚这两个各自的职责，分别整理一下。

        reudx

        对于redux 整个过程如上所示。

        1. 用户在UI组件中通过 store.dispatch触发action ；

        2. store 自动调用reducer，并传入之前的state，以及1中用户的action， 经过reducer返回新的state；

        3. store.subscribe(listener) 订阅state的变化，可通过setState更新react UI。

        redux 整个设计是： 所有你“写”的逻辑都集中在一个单独的函数（reducer）中，并且执行这些逻辑的唯一方式就是传给 Redux 一个能够描述当时情景的普通对象（action）。Redux store 调用这些逻辑函数，并传入当前的 state tree 以及这些描述对象，返回新的 state tree，接着 Redux store 便开始通知这些订阅者（subscriber）state tree 已经改变了。

        因此要求 reducer 是纯函数和可预测，不能突变。

        react-redux

        react-redux 主要是redux执行的第3步（标红部分）。

        使用mapStateToProps订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。 mapStateToProps 是输入逻辑（将state输入到react的UI中）；

        mapDispatchToProps定义了哪些用户的操作应该当作 Action，传给 Store。 mapDispatchToProps是输出逻辑（将用户的操作变成action，从react的UI中发出）。

        容器组件 = connect(mapStateToProps,mapDispatchToProps)(UI 组件)；

        mapStateToProps 中使用的state ，来自于provider组件中注入的store。其实现是react 的context属性。

        资料：