javascript - 使用 redux 操作获取数据

Question

我内部遇到一个问题，如何构建通过 REST API 获取数据的 Redux 操作。

我正在获取各种数据，例如

• 所有帖子均已发布
• 单个帖子
• 所有当前用户
• 搜索结果

我想知道是否创建一个从每个端点获取数据的操作，或者是否创建一个从提供的路由获取数据的单个获取操作？

当前实现:

function requestPosts(site) {
return {
    type: REQUEST_POSTS,
    site
}

function fetchPosts(site) {
return dispatch => {
    dispatch(requestPosts(site))
    return fetch(`http://notareallink.com/posts`)
        .then( response => response.json() )
        .then( json => dispatch( receivePosts( site, json ) ) )
}

function requestPost(site) {
return {
    type: REQUEST_POST,
    site
}

function fetchPost(site) {
return dispatch => {
    dispatch(requestPost(site))
    return fetch(`http://notareallink.com/post/post-id`)
        .then( response => response.json() )
        .then( json => dispatch( receivePost( site, json ) ) )
}

function requestUsers(site) {
return {
    type: REQUEST_USERS,
    site
}

function fetchUsers(site) {
return dispatch => {
    dispatch(requestUsers(site))
    return fetch(`http://notareallink.com/users`)
        .then( response => response.json() )
        .then( json => dispatch( receiveUsers( site, json ) ) )
}

对我来说，这感觉就像是一堆重复的代码，基本上做着同样的事情(从端点获取数据)。

这是正确的方法吗？还是我应该创建一个单独的操作来获取数据并将其传递到相关路由？

如果这不是很清楚，我很抱歉，但在我输入此内容时，我正在努力理解这一点。

Answer 1

所有这些只是可以调用另一个函数来处理重复任务而无需重复代码的函数。

首先，您需要提取重复的 fetch 调用。

const callAPI = url => fetch(`http://notareallink.com/${url}`).then(res => res.json())

为了避免重复的操作调度，您可以使用中间件。看来您已经有了 thunk 中间件。您可以添加自己的包或使用包。

const promiseMiddleware = ({dispatch}) => next => action => {
   const {promise, pending, success, fail} = action
   if(promise) {
     dispatch(pending());
     promise.then(
       res => dispatch(success(res)),
       err => dispatch(fail(err))
     )
   }
   return next(action)
}

像这样使用它

const requestPosts = () => ({ type: REQUEST_POSTS })
const recievePosts = posts => ({ type: RECIEVE_POSTS, posts })
const requestPostsFail = reason => ({ type: REQUEST_POSTS_FAIL, reason })

const fetchPosts = () => dispatch => dispatch({
  promise: callAPI('posts'),
  pending: requestPosts,
  success: receivePosts,
  fail: requestPostsFail
})