Отправка Redux перед рендерингом

Question

Я хочу отправить действие перед визуализацией компонента. Но действие - это асинхронное действие, интегрированное с саунд-редукцией.

Я должен знать, когда выполняется асинхронное действие, если оно выполнено, а затем визуализируйте компонент. Для выполнения этой работы у меня есть уникальный идентификатор для каждого контейнера, и после выполненного действия атрибут {loaded: true} будет сохранен в хранилище.

Я имею в виде таким образом

@preload('uniqueId', (dispatch) => new Promise((resolve, reject) => { 
    dispatch(MyAction(resolve, reject)); 
}) 
@connect(....) 
class MyComponent extends React.Component { 
    .... 
} 

@preload является функцией вызвать определенное действие в componenWillMount (для серверной стороны) или componenDidMount (для клиентской стороны) и, когда вызов действия resolve(), то state.preloadState.uniqueId.loaded установит до true. Он также обертывает компонент таким образом, чтобы только визуализировать компонент, когда state.preloadState.uniqueId.loaded === true.

@connect Соедините данные, которые я хочу предварительно загрузить в редукционный магазин в указанном действии.

Удивительно, что обычная практика заключается в том, чтобы делать предварительную загрузку данных для reducex, redux-saga app, а также для рендеринга на стороне сервера (раньше я использовал redux-async-connect, но я хочу сделать все вложенные компоненты в состоянии сделать предварительная загрузка данных, поэтому я привязываюсь к компонентуWillMount вместо некоторой статической функции).

Answer 1

Да, вы не можете остановить компонент из рендеринга (без его родительского объекта, просто не отображающего его), но вы можете условно ничего не делать. Что-то вроде:

render() { 
    if (!state.data) { return null; } 
    return <div>{state.data}</div> 
}