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

【问题标题】：Use immutable js to set reducer state to returned array使用不可变 js 将 reducer 状态设置为返回数组
【发布时间】：2016-12-18 08:30:28
【问题描述】：

我有一个简单的 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 警告：失败的道具类型：无效的道具badges 类型 object 提供给 Badges，预期为 array

【问题讨论】：

不可变对象是一个“对象”，只需更改组件中的 propType
@Teo 有没有办法将它作为数组返回？
你确定action.payload.badges 是一个数组吗？你在proptypes 中设置了什么？ this.props.badges 在使用它的组件中注销并抛出该错误时会是什么样子？你在哪里做你的.toJs()？
@ajmajmajma action.payload.badges 定义返回对象数组。徽章的 propTypes 设置为数组。不确定toJs 的问题，但我相信你指的是我从国家选择徽章？我通过像 myState.get('transactions') 这样的选择器来做到这一点
我相信 Teo 上面所说的是你的徽章道具可能仍然是不可变的格式（即使你在 reducer 中将它设置为一个数组），这将使它成为一个对象，直到你要么@ 987654332@它或immutableObj.get('badges')。如果不看看你是如何处理这一切的，就很难说。

标签： javascript reactjs redux immutability immutable.js

【解决方案1】：

发生错误是因为 react 需要一个数组，但您返回的是 Immutable.List。并且 React 会渲染组件两次，因为第一次渲染发生在 reducer 的 initialState 中，然后第二次渲染是由于 props 更改（在调度的 action 之后）引起的。

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

如果你想在任何地方都坚持使用 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

【讨论】：