分派后 immutablejs 转动对象

Question

我正在使用来自 flux/utils 的商店构建一个简单的 react/flux 应用程序，当然还有 Immutablejs。当应用程序最初启动时，从存储中检索到的状态是 Immutable.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>
         );
       }
     }
}

以及触发动作的组件：

export default class TopNavigation extends Component {

static propTypes = {
    activeKey: PropTypes.number.isRequired
};

handleSelect = (selectedKey) => {
    AppActionCreator.changeTab({ activeKey: selectedKey });
}

Image的错误也是如此。

我是不是做错了什么（肯定）还是一个错误？

Answer 1

你的问题是 React 组件的状态不能是 Immutable.js 结构。它需要是一个普通的 js 对象。因此，您的商店应该改为：

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

分派后 immutablejs 转动对象

immutablejs turning object after dispatch

flux

reactjs

immutable.js