您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
在AntDesign项目中集成Redux或MobX,可以按照以下步骤进行:
npm install redux react-redux
npm install mobx mobx-react
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;
import { observable, action } from 'mobx';
class Store {
@observable count = 0;
@action increment() {
this.count++;
}
@action decrement() {
this.count--;
}
}
const store = new Store();
export default store;
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
const Root = () => (
<Provider store={store}>
<App />
</Provider>
);
export default Root;
import React from 'react';
import { Provider } from 'mobx-react';
import store from './store';
import App from './App';
const Root = () => (
<Provider store={store}>
<App />
</Provider>
);
export default Root;
import React from 'react';
import { connect } from 'react-redux';
const Counter = ({ count, increment, decrement }) => (
<div>
<h1>{count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
const mapStateToProps = state => ({
count: state.count,
});
const mapDispatchToProps = {
increment: () => ({ type: 'INCREMENT' }),
decrement: () => ({ type: 'DECREMENT' }),
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
import React from 'react';
import { inject, observer } from 'mobx-react';
const Counter = ({ store }) => (
<div>
<h1>{store.count}</h1>
<button onClick={store.increment}>Increment</button>
<button onClick={store.decrement}>Decrement</button>
</div>
);
export default inject('store')(observer(Counter));
通过以上步骤,在AntDesign项目中成功集成Redux或MobX并使用其管理应用的状态。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。