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

Question

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

1. getWeb 在加载页面时被调用 (Link to code)
2. 创建 web3 对象 (Link to Code)
3. 并在 Redux 存储中存储 web3 (Link to code)

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

只有在设置后才能从 Redux 存储中检索 web3 的正确方法应该是什么？

layouts/test/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 将做所有事情，请参阅下面的 cmets：

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) 可能是一个可行的替代方案。