reactjs - 在 redux-saga 或 reducer 中处理下载项标准化?

标签 reactjs redux redux-saga

我从删除 API 获取的数据不是我的应用可以处理的格式。 我的传奇下载数据。

谁应该处理标准化?

在使用规范化数据发送成功操作之前,传奇本身是什么?

或者路由器应该在构建新状态之前标准化日期吗?

编辑我选择在传奇中进行标准化并保持 reducer 清洁。它只是用 activitiesUpdated 提供的新事件替换事件。

reducer

export default function account(state = ACCOUNT, action) {
  switch (action.type) {
    case "account/LOGIN_SUCCESS":
      const { access_token, user } = action
      return { ...state, user, access_token, authenticated: true, error: "" }
    case "account/LOGOUT_SUCCESS":
      return ACCOUNT
    case "account/LOGIN_ERROR":
      return { ...state, error: action.error }
    case "account/ACTIVITIES_UPDATED":
      return { ...state, activities: action.activities }
    default:
      return state
  }
}

这些是传奇:

function sortActivities(activities) {
  return action.activities.sort((a,b) => b.timestamp.localeCompare(a.timestamp))
}

function addInvoices(activities) {
  let lastYearMonth, invoiceItem
  return activities.reduce((state, item, index) => {
    const currentYearMonth = item.timestamp.substr(0,7)
    if (currentYearMonth != lastYearMonth) {
      lastYearMonth = currentYearMonth
      invoiceItem = {
        id: currentYearMonth,
        type: "invoice",
        parking: 0,
        rebates: 0,
        sum: 0,
        timestamp: currentYearMonth
      }
      state.push(invoiceItem)
    }
    const amount = Math.abs(Number(item.gross_amount))
    if (item.type == "parking") {
      invoiceItem.parking += amount
      invoiceItem.sum -= amount
    } else if (item.type == "rebate" || item.type == "surplus") {
      invoiceItem.rebates += amount
      invoiceItem.sum += amount
    }
    state.push(item)
    return state
  }, [])
}

function *getActivities(access_token) {
  console.info("fetch activities")
  try {
    const activities = yield call(getActivitiesAsync, access_token)
    console.info("activities fetched")
    yield put(activitiesUpdated(addInvoices(activities.sortActivities(activities))))
  } catch (error) {
  }
}

function *updateActivities() {
  while (true) {
    const { access_token } = yield take(LOGIN_SUCCESS)
    console.info("Calling getActivities")
    yield call(getActivities, access_token)
    while (true) {
      const {type } = yield take([REFRESH_ACTIVITIES, LOGOUT])
      if (type == LOGOUT) {
        break
      }
      yield call(getActivities, access_token)
    }
  }
}

当您想到 updateActivities 传奇中双重包装的 while 循环时?

这是否正确

yield take([REFRESH_ACTIVITIES, LOGOUT])

只是

的快捷方式

产量竞赛[take(REFRESH_ACTIVITIES), take(LOGOUT)]

最佳答案

最终,在这种情况下,你可以自由地做任何对你有用的事情——没有充分的理由支持其中一种。您最终可能会发现,根据数据的结构方式,在 saga 中执行此操作将需要更少的代码,因为您只将结果分解一次而不是两次(在关心数据的 2 个 reducer 中各分解一次)。但是情况可能是这样,也可能不是。我也喜欢在 reducer 中这样做的想法,因为 reducer 通常应该尽可能简单,而这个模型适合这一点。

但正如我所说,我认为没有一个强有力的普遍论据来支持其中一个。

关于reactjs - 在 redux-saga 或 reducer 中处理下载项标准化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35757613/

相关文章:

javascript - React 事件处理程序、委托(delegate)

reactjs - 将 redux-saga 与 React-router 一起使用

javascript - Next.js 类型错误 : Cannot set properties of undefined (setting 'hook' )

javascript - 商店的 React/Redux props 属性未定义

javascript - Material -UI + React : Card cannot expand with expander

javascript - 按下提交/onclick 时使用 jquery 关闭模式

javascript - sagas 中的异步错误传播

redux - 无法使用 redux-saga 从服务器产生 json 响应

javascript - 尝试读取图像文件时检测到 React-native 无效的 UTF-8

javascript - 如何在可重用的 React 组件库中捆绑 prop 类型