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

Posted 2023-03-23

【中文标题】使用不可变 js 将 reducer 状态设置为返回数组

【英文标题】：Use immutable js to set reducer state to returned array

【发布时间】：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')。如果不看看你是如何处理这一切的，就很难说。

【参考方案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