immutablejs調度後的對象

我正在使用來自flux/utils和當然Immutablejs的商店構建一個簡單的react/flux應用程序。當應用程序最初啓動時從store檢索到的狀態是Immutable.map，但在分派之後，映射會奇蹟般地變爲對象，保留所有映射屬性，但在嘗試獲取鍵值時拋出異常。immutablejs調度後的對象

我的調度員：

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也是錯誤。

我做錯了什麼（某些）還是錯誤？

來源

2016-04-03 luca marangon

你在哪裏實際定義/使用地圖？ –

剛編輯的問題。當我初始化商店。 –

你的問題是React組件的狀態不能是Immutable.js結構。它需要是一個普通的js對象。所以，你的商店應該是：

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

來源

2016-04-03 06:36:18

謝謝你。 https://github.com/facebook/immutable-js/wiki/Immutable-as-React-state –

immutablejs調度後的對象

回答

相關問題