Question

我正在创建一个分页系统 reducer部分如下所示：

(state, payload)=> {
            if (state.venues === null) {
                    state.venues = [];
            }
            state.venues.push.apply(state.venues, payload.data)
            return {
                    ...state,
                    isRequesting: false,
                    hasVenues: true,
                    venues: state.venues,
                    hasMessage: false
            }
    },

我在组件中迭代state.venues 问题是，对于第一个请求，state.venues为空，因此我应该将其转换为空数组以向其附加有效负载。
但是通过这种方法，我认为我改变了在redux中不允许（推荐）的状态那么如何在没有状态变异的情况下实现这一目标呢？

Answer 1

要创建新的场地阵列，请使用点差运算符：

var newVenues = [
    ...state.venues,
  'Tokyo'
];

您可以使用Object.assign来避免改变状态：

var newState = Object.assign({}, state, { venues: newVenues });

（为了清楚起见，我在你的例子中遗漏了状态的其他部分）。

Answer 2

您可以将push替换为concat

concat是Array的纯函数返回新数组而不改变原始值

  (state, payload) => {
    if (state.venues === null) {
      state.venues = [];
    }
    const newVenues = state.venues.concat(payload.data)
    return {
      ...state,
      isRequesting: false,
      hasVenues: true,
      venues: newVenues,
      hasMessage: false
    }
  }

顺便说一句：

如果您发现自己在每个子reducer /嵌套状态中重复使用Object spread或Object.assign。你应该考虑使用Immutable.js

Answer 3

一种解决方法是将state.venues附加到payload.data并返回payload.data作为回复。

            payload.data.push.apply(payload.data, state.venues)
            return {
                    ...state,
                    isRequesting: false,
                    hasVenues: true,
                    venues: payload.data,
                    hasMessage: false
            }

如何在不改变状态的情况下附加数据

3 个答案: