Question

如何将从API调用中收到的数据分开并将其存储在reducer中？

我的API调用：

行动：

export function fetchCatsFromAPI() {
  return(dispatch) => {
    dispatch(getCats())
     fetch(myapi)
    .then(res => res.json())
    .then(json => dispatch(getCatsSuccess(json)))     // <= Dispatching the entire data.
    .then(json => dispatch(getCatsTotalSuccess(json.total)))  // <= This did not work.
    .catch(err => dispatch(getCategoriesFailure(err)))
  }
}


getCategories() : Dispatches FETCHING_CATEGORIES
getCategoriesSuccess() : Dispatches FETCHING_CATEGORIES_SUCCESS
getCategoriesFailure() : Dispatches FETCHING_CATEGORIES_FAILURE

API调用返回：

{"total":6,"categories":[{"id_cat":1,"name":"CAT01"},{"id_cat":2,"name":"CAT02"}]}

减少：

const initialState = {
  categories: [],
  totalResults: '',
  isAdding: false,
  error: {}
}

export default function categories(state=initialState, action) {
  switch(action.type) {
    case "FETCHING_CATEGORIES":
      return {
        ...state,
        isAdding: true
      }
    case "FETCHING_CATEGORIES_SUCCESS":
      return {
        ...state,
        isAdding: false,
        categories: action.data,
        totalResults: action.data.total // <= This did not work.
      }
    case "FETCHING_CATEGORIES_FAILURE":
      return {
        ...state,
        isAdding: false,
        error: action.err
      }
    default: 
      return state
  }
}

getCatsTotalSuccess的另一个案例也不适用于json.total

我想为var和categories单独total。我该怎么做？

更新1：操作：

function getCats(){
  return {
    type:FETCHING_CATEGORIES
  }
}

function getCatsSuccess(data){
  return {
    type:FETCHING_CATEGORIES_SUCCESS,
    data
  }
}

function getCatsTotalSuccess(data){
  return {
    type:FETCHING_CATEGORIES_TOTAL_SUCCESS,
    data
  }
}

function getCatsFailure(err){
  return {
    type:FETCHING_CATEGORIES_FAILURE,
    err
  }
}

Answer 1

在您的dispath内，在您的操作中，要在React中遵循最常用的约定，您需要发送两个属性的对象：类型和有效负载。 payload将包含您的API返回的数据，而type将是reducer要更新的引用

您没有显示您的操作创建者代码所包含的内容，因此我正在编写应该是您的代码的工作版本。包括动作创作者。

以下是操作代码的外观：

import { 
    FETCHING_CATEGORIES_SUCCESS,
    FETCHING_CATEGORIES,
    FETCHING_CATEGORIES_FAILURE 
    } from 'constant-path'

export function fetchCatsFromAPI() {
  return(dispatch) => {
    dispatch({ type: FETCHING_CATEGORIES}) // We tell our store that we are iniaiting an API call. This is ideal to since network calls may take several MS to load. A spinner can be rendered while we are at this stage
     fetch(myapi)
    .then(res => res.json())
    .then(json => dispatch({ type: FETCHING_CATEGORIES_SUCCESS, payload: json))     // <= I believe here was your mistake 
    .catch(err => dispatch({ type: FETCHING_CATEGORIES_FAILURE, payload: err}))
  }
}

你的减速机应该如何看待：

import { 
FETCHING_CATEGORIES_SUCCESS,
FETCHING_CATEGORIES,
FETCHING_CATEGORIES_FAILURE 
} from 'constant-path' 

const initialState = {
  categories: [],
  totalResults: '',
  isAdding: false,
  error: {}
}

export default function categories(state=initialState, action) {
  switch(action.type) {
    case FETCHING_CATEGORIES:
      return {
        ...state,
        isAdding: true
      }
    case FETCHING_CATEGORIES_SUCCESS:
      return {
        ...state,
        ...payload
      }
    case FETCHING_CATEGORIES_FAILURE:
      return {
        ...state,
        isAdding: false,
        error: action.err
      }
    default: 
      return state
  }
}

常量文件看起来像：

export const FETCHING_CATEGORIES_SUCCESS = 'FETCHING_CATEGORIES_SUCCESS';
export const FETCHING_CATEGORIES = 'FETCHING_CATEGORIES';
export const FETCHING_CATEGORIES_FAILURE = 'FETCHING_CATEGORIES_FAILURE';

通过上述内容，您可以避免开发人员遇到的烦人且常见的问题，当他们从操作向减速器发送时不使用常量。

过滤从API调用接收的数据

1 个答案: