如何将 axios 数据加载为初始 redux 状态答案

【问题标题】：How to load axios data as initial redux state如何将 axios 数据加载为初始 redux 状态
【发布时间】：2019-09-03 07:12:18
【问题描述】：

我尝试在初始状态下加载一些 axios json 结果，以便以预填充状态打开我的应用程序，但我无法在初始状态下加载 axios 结果，我可以在控制台上看到它，但是return 在这里不起作用

这是我的reducer的代码

import axios from "axios";


const getBookings = () => {
  return new Promise((resolve) => {
    axios.get('http://localhost:4000/bookings.json')
      .then(res => resolve(res.data))
  });
}


const getInitiatState = getBookings().then(
  function(data)
  {
    console.log(data)
    const initialState = {
      data: data, // ' ' or axios result
    };
    return initialState;
  }

)


function bookings(state = getInitiatState, action)
{
  switch(action.type)
  {
    default:

      return state

  }

}

export default bookings;

【问题讨论】：

您应该将其设为空数组/对象，并稍后通过适当的操作“初始化”状态。
法德所说的。我通常在组件确实安装在应用程序的索引上或在您的应用程序早期的某个地方执行此步骤。
另外问题是你实际上是在最初将承诺添加到状态中。你最终会看到数据，但是在 Promise 对象被添加到你的初始状态之后。记住 JS 是同步的，但 AJAX 是异步的。 Javascript 不会等待 ajax 完成（如果 async await 可以工作，可能是一种暗示？）

标签： reactjs redux

【解决方案1】：

正如我在 cmets 中所说：您应该将其设置为空数组/对象，并稍后通过适当的操作“初始化”状态。现在不是用数组创建状态，而是用 promise 填充它。

我的示例使用带有钩子的 React 和 setTimeout（这将与您的 fetch 相同）：https://codesandbox.io/s/6wwy4xxwwr?fontsize=14

您也可以在您的“index.js”中使用store.dispatch(action) 来执行此操作，例如：

import store from './fileWithConstStore';

fetch()
.then(data => {
  store.dispatch({
    type: 'INIT_BOOKINGS',
    payload: data 
  })
});

但这比批准的解决方案要快。

【讨论】：