【问题标题】:How to combine sub-reducer without creating separate entry in state in redux如何在不在 redux 中创建单独的 state 条目的情况下组合 sub-reducer
【发布时间】:2017-01-20 18:32:42
【问题描述】:

我的问题可能听起来有点愚蠢,我还在学习 react 和 redux。 我的应用中有user,这是我的用户状态模式:

user : {
  error,
  isAuthed,
  authToken,
  isFetching,
  currentRole,
  roles : ['role', 'role'],
  paymentsInfo: [{invoice}, {invoice}, {invoice}]
}

这是我的用户减速器:

function user(state = initialUserState, action) {
    switch (action.type) {
    case 'FETCHING_USER': {
        return {
            ...state,
            isFetching : true
        }
    }
    case 'FETCHING_USER_ERROR': {
        return {
            ...state,
            isFetching : false,
            error      : action.error
        }
    }
    case 'FETCHING_USER_SUCCESS': {
        return {
            // update user state
        }
    }
    // payments reducer
    case 'FETCH_PAYMENT_DETAILS': {
        return {
            ...state,
            payments : payments(state.payments, action)
        }
    }
    case 'FETCH_PAYMENT_SUCCESS': {
        return {
            ...state,
            payments : payments(state.payments, action)
        }
    }
    default:
        return state
    }
}

我在不同的文件中维护 Payments reducer,user reducer 中的最后 3 个案例与 payments reducer 的操作相匹配:

function payments(state = initialPaymentState, action) {
    switch (action.type) {
    case 'FETCH_PAYMENT_DETAILS' : {
        return {
            ...state,
            isFetching : true
        }
    }
    case 'FETCH_PAYMENT_ERROR' : {
        return {
            ...state,
            isFetching : false,
            error      : action.error
        }
    }
    case 'FETCH_PAYMENT_SUCCESS' : {
        return {
            ...state,
            isFetching : false,
            error      : '',
            invoices   : action.paymentDetails
        }
    }

    default:
        return state
    }
  }

我没有为 payments 维护单独的状态,但是当我从 API 获取付款数据时,我需要在 user 状态下更新它。现在我的问题是,有没有一种方法可以将 userpayments 减速器组合在一起,而无需为 payments 创建单独的状态

【问题讨论】:

  • 你是什么意思 - 将它们组合在一起?
  • @Radio- 通过组合我的意思是我不想在user reducer 中编写payments 方法的情况,同时我希望它们都在单独的文件中,payments不应该在主状态树中创建新实例应该是user的一部分(参见架构)

标签: redux


【解决方案1】:

您的用户默认情况可以返回 { ...state, payment : payment(state.payments, action) }

但是,这看起来像是 redux 的反模式,我认为您应该考虑为什么要从用户中删除 case 语句。将它们放在那里可以让阅读代码的人清楚地知道这些操作会影响用户状态。

【讨论】:

    【解决方案2】:

    更新状态的唯一方法是调度一个动作。因此,您应该在检索付款后发送一个操作并修改用户减速器来处理此操作。 还应该能够捕获用户减速器中的任何操作。如果您不需要付款状态,您可以处理用户减速器中的所有操作。如果您想合并您的部分状态,请查看 redux

    中的 combineReducers 函数

    【讨论】:

      猜你喜欢
      • 2019-09-01
      • 2017-09-03
      • 1970-01-01
      • 2013-08-07
      • 1970-01-01
      • 2022-12-28
      • 1970-01-01
      • 2018-08-30
      • 1970-01-01
      相关资源
      最近更新 更多