使用 redux 操作获取数据

Question

我在内部遇到了一个问题，关于如何构建通过 rest 获取数据的 redux 操作 api。

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

全部 post 已发布
单数post
所有当前用户
搜索结果

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

当前实施：

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

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

首先，您需要提取重复的 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
})

使用 redux 操作获取数据

Fetching data with redux actions

javascript

reactjs

redux

react-redux