0x00 前言

这周实在太忙了,只能偷懒拿旧项目开个新题目,但含金量绝对不低🤩🤩

在正式开始之前,我先宣布一个好消息,我们的合约已经部署,并且配置好了:

Untitled

Untitled

And,押金也交了:

Untitled

也就是说,我要相信我的合约不出bug,并且乖乖写文章,才能确保押金能退回,不然……要不就永远无法取出,或者自动发给大家了 😃

言归正传,我们今天先不(mei)着(shi)急(jian)做前端,考虑到本文的话题,我们先复习一下React-Redux的写法。

0x01 React-Redux

React-Redux 是一个用于构建可扩展的、可维护的 JavaScript 应用程序的库。它结合了 React 和 Redux,以提供一种有效的方式来管理应用程序的状态。

React 是一个用于构建用户界面的 JavaScript 库,它通过组件化的方式使开发者能够构建可重用、模块化的用户界面。React 的核心理念是将界面拆分为小的、独立的组件,每个组件负责管理自己的状态和逻辑。React 使用虚拟 DOM(Virtual DOM)来高效地更新页面,并且具有一些高级特性,例如生命周期方法和组件间的数据传递。

Redux 是一个状态管理库,它通过集中管理应用程序的状态来简化复杂的数据流。Redux 的核心概念是单一的、不可变的状态树(State Tree),整个应用程序的状态存储在一个对象中。状态的更新通过纯粹的函数(Reducers)来处理,这些函数接收旧的状态和一个操作(Action),返回一个新的状态。Redux 通过使用中间件(Middleware)来处理副作用,例如异步操作和日志记录。

React-Redux 将 React 和 Redux 结合在一起,提供了一个桥梁来连接 React 组件和 Redux 状态管理。它通过提供一个高阶组件(Higher-Order Component)来将 Redux 的状态映射到 React 组件的属性,并将 Redux 的操作映射到 React 组件的方法中。这使得开发者能够在 React 组件中访问和更新 Redux 的状态,同时保持组件的独立性和可测试性。

React-Redux 的核心 API 包括 Provider 组件和 connect 函数。Provider 组件将 Redux 的状态树注入到应用程序中,使得所有的组件都能够访问到状态。connect 函数用于连接 React 组件和 Redux 状态,它接收一个映射函数,将 Redux 的状态映射到组件的属性,并将组件的操作映射到 Redux 的操作。

使用 React-Redux 可以帮助开发者组织和管理应用程序的状态,提高代码的可读性和可维护性。它提供了一种清晰的数据流和一致的架构模式,使得开发者能够更容易地构建复杂的应用程序。同时,React-Redux 还与其他工具和库,如 React Router 和 Redux Thunk 等,无缝集成,进一步增强了开发者的开发体验。

(以上出自ChatGPT)

如果大家对React或者Redux不熟悉,可以参考中文文档: