添加數據后從Redux Store獲取數據

Question

我正在使用稱為trufflebox的react-auth的樣板

1. 加載頁面時調用getWeb （ 鏈接到代碼 ）
2. 這將創建web3對象（ 鏈接到代碼 ）
3. 並將web3存儲在Redux存儲中（ 鏈接到代碼 ）

問題：當我從Redux存儲中檢索web3對象時，它是undefined ，很可能是因為上述步驟2中尚未創建web3 。

僅在設置web3從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階段調用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>
  )
}

nextProps.whatever是您從redux映射的內容（不完全確定這是您的詳細信息）。 理想情況下，這是反饋​​到您的組件中的，當值填充或更改時，您可以調用函數

---

另外，我在這里看到很多狀態管理，與我期望通過props完成的狀態相反。 如果考慮到您的應用程序體系結構， componentWillReceiveProps(nextProps)不是一個好的鈎子，那么componentDidUpdate（prevProps，prevState）可能是一個可行的選擇。