Получить исходные данные с сервера перед визуализацией в приложении React + Redux

Question

Загрузка исходных данных с сервера в хранилище Redux У меня есть хранилище Redux с данными, например, объект корзины покупок с продуктами. По умолчанию я использую пустой массив

const initialState = {cart: {products: []}}
const reducer = (state = initialState, action) { return {...state} }
const store = createStore(reducer)

Мне нужно загрузить исходные данные с сервера и поместить в массив продуктов перед загрузкой приложения вместо пустого массива. Я нашел два способа реализации этого, но я сомневаюсь, какой лучше, а может и нет

1 - действие INIT_APP

1. Создать действие INIT_APP и initApp () asyn c создатель действий (с использованием примера thunk fore)
2. отправить его по методу componentDidMount в приложении. js component
3. Извлечь данные с сервера внутри initApp () и отправить действие INIT_APP_SUCCESS в случае успеха
4. Прослушать INIT_APP_SUCCESS внутри редуктора и получить продукт корзины data
5. Обновление хранилища

---

const initialState = {cart: {products: []}}
const reducer = (state = initialState, action) {
  switch(action.type) {
    case: INIT_APP_SUCCESS
      return {...state, products: action.payload.cartProducts}
  }
}

2 - Asyn c response dom

1. Извлечение данных с сервера внутри индекса. js
2. При успешном вызове ReactDOM.render
3. Передача данных в предварительно загруженный агрегат createStore в качестве исходного состояния

---

ReactDOM.render(<Loader />, ...)
axios.get(url).then(products => {
  const store = createStore(reducer, {cart: {products}})
  ReactDOM.render(<Provider store={store}><App /></Provider>, ...)
}