Где загрузить данные сервера

Question

Я использую ответный маршрутизатор и перейдите к компоненту, который получает идентификатор в URL-адресе и должен использовать этот идентификатор для получения данных с сервера с помощью действия.

В данный момент я вызываю создателя действия в крючок 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

Вы можете подписаться на розыгрыш onEnter маршрутизатора, откуда и где.

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

Таким образом, вы можете избежать setState от предыдущего ответа и не связать компонент с Redux.

Answer 2

Вы должны создать обратный вызов, например:

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

Тогда в следующих срабатывают функции выполните следующие действия:

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

Я предполагаю, что вы используете Примеси для реакции -router, если нет, посмотрите на документы для него, у них есть некоторые полезные функции, на которые стоит обратить внимание.

Не думаю, что вам понадобится логика if в методе render(), реакция будет обрабатывать это с помощью управления виртуальным домом и знать, когда его загружать и данные.