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