javascript - 使用不可变的js将reducer状态设置为返回的数组

Question

我有一个简单的 reducer 示例:

import { fromJS } from 'immutable'
import {
  REQUEST_SUCCESS
} from './constants'

const initialState = fromJS({
  badges: []
})

function badgesReducer (state = initialState, action) {
  switch (action.type) {
    case REQUEST_SUCCESS:
      return state
        .set('badges', action.payload.badges || [])
    default:
      return state
  }
}

export default badgesReducer

这里的想法是将徽章设置为等于action.payload.badges内的api响应返回的数组，但是我相信我做错了什么，因为我返回了以下错误:

warning.js:44 Warning: Failed prop type: Invalid prop badges of type object supplied to Badges, expected array

Answer 1

发生错误是因为 React 需要一个数组，但你返回一个 Immutable.List。 React 渲染组件两次，因为第一次渲染是在 reducer 初始状态下发生的，然后第二次渲染是由于 props 更改(在分派(dispatch)操作之后)引起的。

由于您在 REQUEST_SUCCESS 操作中传递了initialState 中的 Immutable.List 和数组，因此您的 props 不一致。

如果你想在任何地方都坚持使用 Immutable.js，那么可以像这样声明 propTypes。

组件

import React, { PropTypes } from 'react'
import { List } from 'immutable'

Component.propTypes = {
  badges: PropTypes.instanceOf(List)
}

reducer

import { fromJS, List } from 'immutable'

function badgesReducer (state = initialState, action) {
  switch (action.type) {
    case REQUEST_SUCCESS:
      return state
        .set('badges', fromJS(action.payload.badges) || List())
    default:
      return state
  }
}

如果您希望始终将数组传递给组件，请从initialState声明中删除fromJS