如何在flux中正确传递immutablejs对象

时间:2016-01-18 02:06:55

标签: javascript immutability reactjs-flux immutable.js

我在应用程序中使用react + flux。我正在尝试使用不可变的j来加速渲染过程,因为每次我对状态进行任何小的改动时,都会尝试协调所有的DOM(这很慢)。

我遇到的问题是在我的store.js中,我可以将我的状态转换为不可变的Map对象。但是,只要将此对象传递给应用程序,它就不再被识别为Map对象,而只是普通对象。这意味着我不能使用Map对象附带的任何set或get函数

这是我到目前为止所做的:

Store.js

var Immutable = require("immutable");

var Store = function(){   
    var jsState = { object1 : "state of object 1", 
                    object2 : "state of object 2"}
    this.globalState = Immutable.fromJS(globalState);

    this._getGlobalState = function(){
        //console will log: Map { size=2,  _root=ArrayMapNode,  __altered=false,  more...}
        //this.globalState.get("object1"); will work
        console.log(this.globalState); 
        return this.globalState;
    }
}

App.js

var Store = require("./Store.js");
var Map = require("immutable").Map

var App = React.createClass({
    getInitialState: function(){
        return ({});
    },
    componentWillMount: function()
        this._getStateFromStore(); //will get the immutable state from the store
    },
    _getStateFromStore: function()
    {
        return this.setState(Store._getGlobalState());
    },
    render: function(){
        //this will return Object { size=2,  _root=ArrayMapNode,  __altered=false,  more...}
        //this.state.get("object1") will NOT work
        console.log(this.state);
        return <div>This is in App</div>
    }
});

我在这里做错了吗?我错过了任何文件中的任何模块吗?非常感谢!

1 个答案:

答案 0 :(得分:1)

因此,您实际上无法强制State对象成为Immutable对象。相反,您必须在您的州内存储Immutable对象。

所以,你想要做的事情如下:

getInitialState: function(){
  return ({
    data: Immutable.Map({})
  });
},

...
_getStateFromStore: function()
{
  return this.setState({
    data: Store._getGlobalState()
  });
},

when you want to assign a new value to the global variable