Question

我正在使用a boilerplate called trufflebox's react-auth

getWeb
创建web3对象（Link to Code）
并将web3存储在Redux商店（Link to code）

问题：当我从Redux商店检索web3对象时，它是undefined，很可能是因为在步骤中尚未创建web3 2如上所述。

只有在设置了Redux商店后才能从Redux商店中检索web3的正确方法是什么？

布局/测试/ Test.js

import React, { Component } from 'react';
import store from '../../store';


class Test extends Component {

    componentWillMount() {
        this.setState({
            web3: store.getState().results.payload.web3Instance
        })
        this.instantiateContract()
    }

    instantiateContract() {
        console.log(this.state.web3)                             // UNDEFINED!!
    }


    render() {
        return (
            <h1>Test</h1>
        )
    }
}

export default Test

如果我再次检索web3而没有进入Redux商店，那么一切正常：

import React, { Component } from 'react';
import getWeb3 from '../../util/web3/getWeb3';


class Test extends Component {

    componentWillMount() {
        getWeb3
        .then(results => {
            this.setState({
                web3: results.payload.web3Instance
            })
            this.instantiateContract()
        })
    }


    instantiateContract() {
        console.log(this.state.web3)
    }


    render() {
        return (
            <h1>Test</h1>
        )
    }
}

export default Test

Answer 1

在创建商店后解决承诺

<强>的src / store.js

        import getWeb3 from './util/web3/getWeb3';
        import { createStore } from 'redux';

        //... prepare middlewares and other stuffs , then : create store
        const store = createStore(/*....configure it as you want..*/);

        // Just after creating store, here the engineering:

        getWeb3.then(results => {
          // Assuming you have suitable reducer
          // Assuming the reducer put the payload in state and accessible via "getState().results.payload.web3Instance"
          store.dispatch({ type: 'SAVE_WEB3', payload: results.payload.web3Instance });
        });


        export default store;

在你 ./ index.js （你正在渲染整个应用程序）中，考虑使用Provider组件作为包装器将商店传递给看到后面并拥有单件商店。

<强>的src / index.js

        import { Provider } from 'react-redux';
        import store from './store';

        ReactDOM.render(

          <Provider store={store}>
            <Test />
          </Provider>
        )

现在，在您的组件中，connect HOC将执行所有操作，请参阅以下注释：

<强>的src /.../ Test.js

        import { connect } from 'react-redux';


        class Test extends Component {
           // No need any lifecyle method , "connect" will do everything :)

            render() {
                console.log(this.props.web3)      
                return (
                    <h1>Test</h1>
                )
            }
        }
        // Retrieve from Redux STATE and refresh PROPS of component

        function mapStateToProps(state) {
          return {
            web3: state.results.payload.web3Instance  // since you are using "getState().results.payload.web3Instance"
          }
        }
        export default connect(mapStateToProps)(Test); // the awesome "connect" will refresh props

Answer 2

也许在componentWillReceiveProps阶段尝试致电ctx.beginPath(); var bg = new Image(); bg.src = image; bg = function() { var pattern = ctx.createPattern(this, "no-repeat"); ctx.fillStyle = pattern; }; ctx.moveTo(canvasCenterHoriz, canvasCenterVert); ctx.arc(x, y, radius, startAngle, endAngle, direction); ctx.lineWidth = 0; ctx.fill();。看看以下......

instantiateContract

其中componentWillMount() { this.setState({ web3: store.getState().results.payload.web3Instance }); } instantiateContract() { console.log(this.state.web3); // hopefully not undefined } componentWillReceiveProps(nextProps) { if(nextProps.whatever) { this.instantiateContract(); } } render() { return ( <h1>Test</h1> ) }是您从redux映射的内容（不完全确定这给出了您的详细信息）。理想情况下，这会反馈到您的组件中，当值填充或更改时，您可以调用您的函数

此外，我看到很多州管理层反对我希望通过nextProps.whatever完成的工作。如果给定您的应用程序架构，props不是一个好的钩子，componentDidUpdate(prevProps, prevState)可能是一个可行的选择。

添加数据后从Redux Store获取数据

2 个答案: