javascript - 如何在 Redux 中不使用 .toYS() 的情况下将 Immutable js 数据结构转换为用例数组?

标签 javascript reactjs redux react-redux immutable.js

在 Redux+Immutable js 新手中,我发现 toJS 方法存在一些性能问题,但在我的用例中我找不到任何替代方案。那么如何将列表转换为对象数组。

我的初始状态

const initialState = fromJS({
   postArr:[]
});

而且我也在使用 SSR,所以我的 window.State 将转换为不可变的数据结构

const initialState = window.__STATE__;

// Transform into Immutable.js collections,
// but leave top level keys untouched for Redux
Object
    .keys(initialState)
    .forEach(key => {
        initialState[key] = fromJS(initialState[key]);
    });

配置商店

import {combineReducers} from 'redux';
import {routerReducer} from 'react-router-redux';

import allPosts from './allPosts'


export default combineReducers({
    allPosts,

    //ForServerSide
    routing: routerReducer
})

这是我的基于组件的用例

const mapStateToProps = (state) => {
    return{
        posts:state.allPosts.get('postArr')
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        getAllPosts:() => dispatch(allPosts.getAllPosts())
    }
};

@connect(mapStateToProps,mapDispatchToProps)

但是 this.props.post 看起来仍然像不可变的结构,但是如何使用它,抱歉 console.log 演示很差,但我想展示

List {size: 100, _origin: 0, _capacity: 100, _level: 5, _root: VNode…}
size
:
100
__altered
:
true
__hash
:
undefined
__ownerID
:
undefined
_capacity
:
100
_level
:
5
_origin
:
0
_root
:
VNode
_tail
:
VNode
__proto__
:
IndexedIterable

最佳答案

它并没有直接回答你的问题,但听起来你问这个问题是因为你不知道如何让 Redux 和 ImmutableJs 很好地协同工作:

// Transform into Immutable.js collections,
// but leave top level keys untouched for Redux

有一个名为 redux-immutable 的库,我在我的项目中使用它,它允许您将整个状态作为 ImmutableJS 对象进行管理:

redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

When Redux createStore reducer is created using redux-immutable then initialState must be an instance of Immutable.Collection.

https://www.npmjs.com/package/redux-immutable

关于javascript - 如何在 Redux 中不使用 .toYS() 的情况下将 Immutable js 数据结构转换为用例数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44828654/

相关文章:

javascript - 对 ASP.NET MVC Controller 的 JQuery JSON POST 请求未到达端点,但手动使用路由工作正常

javascript - Jest 异常匹配类型和消息

javascript - Redux 在状态之间共享数据,顶级选项

javascript - TypeScript 错误 - 应有 1-2 个参数,但有 0 个或更多。 TS2556

javascript - react 组件的正确命名规范

reactjs - 如何使用react-redux连接外部包中的组件

javascript - 我可以在 React + Redux 中使用 Props 设置初始状态吗?

javascript - 如何调整 HTML 元素的高度以覆盖其父元素的所有可用空间?

Javascript 检测 IE11 版本

javascript - 无法安装 redux-logger