如何使用React redux加载ajax调用的inital数据集？

我有一个尝试加载初始数据的异步调用到我的后端API，返回一个JSON的Redux的问题。现在，我试图加载一堆不同的文章，但我不知道如何异步加载它。由于它是一组初始数据，我应该同步加载它吗？如果是，那么我将如何实现对API的同步调用？如果不是，我将如何异步解决这个问题？如何使用React redux加载ajax调用的inital数据集？

现在，我有静态json数据，data/articles.js在store.js中创建默认状态。

感谢

来源

2016-07-07 Parkicism

或者装载数据时，应用程序启动时，考虑在页面加载的页面出货数据一起。这可以显着加快页面启动。然而，它也可能会比较慢，具体取决于数据量，后端获取的时间以及用户在数据异步加载之前是否可以使用应用程序（部分）。 – DDS

如果数据未加载，那么用户确实无法对webapp做任何事情。我认为这正是我想要的，在页面加载时发送数据。我会如何去做这件事？谢谢 – Parkicism

只需在准备页面时在后端获取它。您可以使用脚本标记嵌入它。您可以在页面加载时使用'createStore'加载它。您甚至可以使用Redux本身在服务器上生成数据。你可以用'store.getState（）'得到数据，然后发送它。 – DDS

您应该使用redux-thunk中间件，它允许你调度异步操作和fetch库（例如）下载您的初始数据。

所以： 1）建立其获取你的数据，例如一个动作：

export function fetchData() { 
    const options = { 
    method: 'GET', 
    headers: { 
     'Authorization': 'Client-ID xx' // if theres any needed 
    } 
    } 

    return (dispatch) => { 
    return fetch('yourUrl.json', options) 
     .then(response => response.json()) 
     .then(data => dispatch(receiveYourData(data))) 
     .catch(err => console.log(err)); 
} 
}

receiveYourData是一个动作，这将使你的数据在你的状态，例如：

export function receiveYourData (payload = []) { 
    return { 
    type: RECEIVE_DATA, 
    payload: payload 
    } 
}

当然，你必须编写动作处理程序，它在调度一个动作之后，会将你的数据置于你的状态。

如果你有你的设置（类似于上面），你应该在你的componentDidMount生命周期方法中调用fetchData（它当然是其中的一个选项:)）。

如果你不知道如何做特定部件，你可以参考这个Example。

而且official async例如可能会有所帮助:)

来源

2016-07-07 14:37:24 MariuszJasinski

非常感谢您的帮助，我现在有点了解它。我将不得不经过几次这个例子才能完全理解它。 – Parkicism

没问题，祝你好运:) – MariuszJasinski

你在哪里使用componentDidMount？在容器中还是在组件本身中？谢谢 – pikilon

我也有这个问题。事实证明，你必须为这个简单的任务添加很多代码。所以我简化了这个过程并创建了一个包，用于在redux中异步加载初始状态 - redux-async-initial-state。

您可以检查出的例子，并在年底你的情况你的店的创建者看起来就像这样：

// Load initial state function 
const loadStore =() => { 
    return Promise(resolve => { 
    fetch('/data/articles.js') 
     .then(response => response.json()) 
     .then(resolve); 
    }); 
} 

const storeCreator = applyMiddleware(asyncInitialState.middleware(loadStore)); 
const store = storeCreator(reducer);

来源

2016-08-09 10:31:45

如何使用React redux加载ajax调用的inital数据集？

回答

相关问题