ディスパッチ後にオブジェクトが変わることはありません

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オブジェクトである必要があります。だから、あなたの店は代わりになるはずです：

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