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

Question

我有一个简单的减速器示例：

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 initialState 上，然后第二次渲染是由于 props 更改（在调度操作之后）引起的。

您的道具不一致，因为您在 REQUEST_SUCCESS 操作中传递了 initialState 和数组中的 Immutable.List。

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

组件

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

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

减速机

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

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

Use immutable js to set reducer state to returned array

javascript

immutability

reactjs

immutable.js

redux

组件

减速机