Reactjs 分派后的immutablejs对象

Reactjs 分派后的immutablejs对象,reactjs,flux,immutable.js,Reactjs,Flux,Immutable.js,我正在使用flux/utils和Immutablejs中的存储构建一个简单的react/flux应用程序。 当应用程序最初启动时,从存储中检索到的状态是不可变的.map,但在分派之后,映射神奇地变为对象,保留所有映射属性,但在尝试获取键值时引发异常 我的调度员: export function dispatch(type, action = {}) { if (!type) { throw new Error('You forgot to specify type.')

我正在使用flux/utils和Immutablejs中的存储构建一个简单的react/flux应用程序。 当应用程序最初启动时,从存储中检索到的状态是不可变的.map,但在分派之后,映射神奇地变为对象,保留所有映射属性,但在尝试获取键值时引发异常

我的调度员:

export function dispatch(type, action = {}) {

    if (!type) {
        throw new Error('You forgot to specify type.');
    }

    // In production, thanks to DefinePlugin in webpack.config.production.js,
    // this comparison will turn `false`, and UglifyJS will cut logging out
    // as part of dead code elimination.
    if (process.env.NODE_ENV !== 'production') {
        // Logging all actions is useful for figuring out mistakes in code.
        // All data that flows into our application comes in form of actions.
        // Actions are just plain JavaScript objects describing “what happened”.
        // Think of them as newspapers.
        if (action.error) {
            console.error(type, action);
        } else {
            console.log(type, action);
        }
    }
    debugger;
    flux.dispatch({ type, ...action });
} 
我的商店:

class TabStoreClass extends Store {

    constructor(dispatcher, store) {
        super(dispatcher, store);
        this._store = store;
    }

    getStore() {
        return this._store;
    }

//Register each of the actions with the dispatcher
//by changing the store's data and emitting a
//change
    __onDispatch(payload) {

        const { type, activeKey } = payload;

        switch (type) {
            case ActionTypes.CHANGE_TAB:
                this._store = this._store.update("activeKey", (activeKey) => activeKey);
                this.__emitChange();
                break;
        }
    }
}


let store = Immutable.Map({ activeKey: 1 });

const TabStore = new TabStoreClass(AppDispatcher, store);

export default TabStore;
和组件:

export default class AppContainer extends Component {

    constructor(props) {
        super(props);
        this.state = TabStore.getStore();
    }

    componentDidMount() {
        TabStore.addListener(this._onChange);
    }

    componentWillUnmount() {
        TabStore.remove();
    }

    _onChange = () => {
        this.setState(TabStore.getStore());
    }

     render() {
         // AFTER A DISPATCH THE STATE TURNS TO OBJECT!!!!
         console.log("state", this.state);

         render() {

         console.log("state", this.state);

         return (
              <div>
                <TopNavigation activeKey={this.state.get("activeKey")} />
                 <Grid fluid>
                     <Row>
                         <Col className="sidebar" md={2}>
                           <SideBar activeKey={this.state.get("activeKey")} />
                         </Col>
                         <Col className="main" sm={9} smOffset={3} md={10} mdOffset={2}>
                            {this.props.children}
                         </Col>
                     </Row>
                 </Grid>
              </div>
         );
       }
     }
}
错误的原因也是如此


我是做错了什么(当然)还是一个bug?

您的问题是React组件的状态不能是不可变的.js结构。它需要是一个普通的js对象。因此,您的商店应改为:

let store = {
  data: Immutable.Map({ activeKey: 1 })
};

你实际上在哪里定义/使用地图?刚刚编辑了这个问题。当我初始化商店时,谢谢你。
let store = {
  data: Immutable.Map({ activeKey: 1 })
};