如何在不使用Redux中的.toJS()的情况下将不可变的js数据结构转换为用例数组?

时间:2017-06-29 14:57:54

标签: javascript reactjs redux react-redux immutable.js

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

我的initialState

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

1 个答案:

答案 0 :(得分:0)

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

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

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

  

redux-immutable用于创建Redux的等效函数   与Redutable.js状态一起使用的combineReducers。

     

当使用redux-immutable创建Redux createStore reducer时   initialState必须是Immutable.Collection的实例。

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