在哪里加载服务器数据

Question

我正在使用 react-router 并导航到一个在 URL 中获取 ID 的组件，并且必须使用此 ID 从服务器借助一个动作。

目前我正在调用 componentWillMount 挂钩中的动作创建器。

到目前为止这可行，但带来了一个问题。在渲染方法中，我必须检查 myData 是否真的存在及其所有属性，然后才能真正渲染。

@connect(state => {myData: state.etc.myData})
export default class extends React.Component {

  componentWillMount = () => {
    this.props.dispatch(
      ActionCreators.getData(this.props.params.id)
    )
  }

  render() {
    if (this.props.myData.hasNotLoaded) return <br/>
    ...
  }

}

是否有另一种方法可以在渲染之前将数据导入存储而不需要手动检查？

Answer 1

您应该创建一个回调，例如：

_onChange() {
    this.setState(myStore.getData());
}

然后在下面的 React 函数中执行以下操作：

componentDidMount() {
    myStore.addChangeListener(this._onChange);
},
componentWillUnmount() {
    myStore.removeChangeListener(this._onChange);
}

我假设你正在使用 react-router 的 mixins，如果没有，请查看它的文档，它们有一些有用的功能值得一看。

我认为您不需要 render() 方法中的 if 逻辑，React 将通过虚拟 dom 管理来处理它，并知道何时加载它和数据。

Answer 2

您可以从那里订阅路由器的 onEnter 挂钩和调度操作。

const store = configureStore()
const routing = (<Router>
    <IndexRoute onEnter={()=>store.dispatch(myLoadDataActionCreator())}/>
</Router>)

所以你可以避免 setState 之前的答案并且不要将组件与 redux 捆绑在一起。

在哪里加载服务器数据

Where to load the server data

react-router

redux