Question

我使用flux / utils的商店构建一个简单的反应/助焊剂应用程序，当然还有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对象。所以，你的商店应该是：

$ grep '^[^[:blank:]]*[02468][[:blank:]]' infile
M2 * 1 5
M6 * 1 6

immutablejs在发送后转动对象

1 个答案: