使用reduce操作获取数据

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