今天，我们将了解React，Redux和基本的区块链/ DApp概念。

介绍

Truffle使开发人员能够创建具有区块链后端的全栈应用程序。在此示例中，我使用Truffle来实现React和Redux前端，并具有一个区块链后端。

由于空间的初期和相对于整体Web用户的小用户群，没有任何可被接受的标准可以在浏览器中与Web3进行交互。这是一种确保用户在使用以太坊DApp时获得良好体验的简便方法。

加载区块链

默认情况下，“ React Truffle”框会在页面加载后立即尝试连接到Web3。如果用户未登录MetaMask或配置为未部署DApp的区块链，则会窒息用户体验。

提案：区块链➼账户➼互动

我提出了以下模式来加载DApp，而不是一次加载所有内容：区块链➼帐户➼交互。每个步骤都彼此不同，并为用户提供了明确的视觉反馈。

步骤1：加载区块链

步骤2：载入帐户

步骤3：启用互动

在此示例中，有一个合同和该合同的DApp前端。在用户可以与合同进行交互之前，他们需要连接到区块链（我在localhost这里使用由Ganache提供的区块链）。

这里发生了几件事：

页面加载时，未加载Web3

区块链—用户单击“连接区块链”将网页连接到他们在MetaMask中选择的区块链

帐户-加载后，该应用程序提供了第二个按钮来连接其钱包

互动-用户现在可以与DApp进行互动

连接区块链

图1：React渲染的“ Connect Blockchain”按钮

使用Bootstrap，我们可以向用户提供有关他们选择的区块链是否已连接的视觉反馈。在图1中，className包括btn-danger尚待加载的时间， btn-success以及disabled何时包含的时间。Web3代表Redux状态选择器。

该connectBlockchain onSubmit动作通过交互来获取Web3实例，如图2所示。它分派化约web3Loaded(web3)器，将Web3实例保存到状态。

图2：将Web3加载到状态

连接帐户

图3：连接钱包

图3显示了类似的渲染，其中我们根据是否已加载帐户将类似的规则应用于“连接钱包”按钮。但是，这一次，如果加载了Web3，则对是否加载帐户施加了额外的条件：

(account !== null) ? “btn-success” : “btn-warning”

该connectWallet onSubmit动作是一个函数，该函数调用称为的交互loadBlockchainData()，如图4所示。

图4：加载区块链数据

图4显示了loadBlockchainData()，它依次调用loadAccount()了第一行。此函数获取MetaMask提供的帐户，并调度一个名为的操作accountLoaded()，该操作通过化简器将该帐户存储在我们的状态中。

完成这些步骤后，将启用其余界面，并且用户可以自由与DApp进行交互。

结论

将MetaMask与DApp一起使用可能会引起紧张的体验，可能会阻止用户与您的DApp进行交互，可以使用简单的流程Blockchain-Account-Interaction 来简化您的用户。