使用 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
})