drizzle 和 react 学习( 四 ) _react

, document.getElementById("root"));registerServiceWorker();
再次注意，实例作为 props 传递到 App 组件。
8.2 连接 App 组件
现在我们有一个实例，我们可以进入 /src/App.js 开始使用 React API 。
8.2.1 添加状态变量
我们要做的第一件事是在我们的 App 组件中添加以下行
state = { loading: true, drizzleState: null };
我们将在这里使用两个状态变量：
— 指示是否已完成初始化并且应用程序已准备就绪。初始化过程包括实例化 web3 和我们的智能合约，获取任何可用的以太坊帐户并监听（或者，在不支持订阅的情况下：轮询）新块。
— 这是我们将商店的状态存储在顶级组件中的位置。如果我们可以保持这个状态变量是最新的，那么我们可以简单地使用简单的 props 和 state 来使用（即你不必使用任何 Redux 或高级 React 模式）。
8.2.2 添加一些初始化逻辑
接下来，我们将方法添加到组件类中，以便我们可以运行一些初始化逻辑。
componentDidMount() {const { drizzle } = this.props;// subscribe to changes in the storethis.unsubscribe = drizzle.store.subscribe(() => {// every time the store updates, grab the state from drizzleconst drizzleState = drizzle.store.getState();// check to see if it's ready, if so, update local component stateif (drizzleState.drizzleStatus.initialized) {this.setState({ loading: false, drizzleState });}});}
首先，我们从 props 中获取实例，然后我们调用.store. 并传入一个回调函数。每当更新存储时，都会调用此回调函数。请注意，这个商店实际上是一个 Redux 商店，所以如果您之前使用过 Redux，这可能看起来很熟悉。
每当更新商店时，我们将尝试使用 .store.（）获取状态，然后如果初始化并准备好，我们将设置为false，并更新状态变量。
【drizzle 和 react 学习】通过这样做，将始终是最新的，我们也确切知道何时准备就绪，因此我们可以使用加载组件让用户知道。