如何在AntDesign項(xiàng)目中集成Redux或MobX

在AntDesign項(xiàng)目中集成Redux或MobX，可以按照以下步驟進(jìn)行：

1. 安裝Redux或MobX相關(guān)的依賴：

• Redux：使用npm安裝redux和react-redux依賴。

npm install redux react-redux

• MobX：使用npm安裝mobx和mobx-react依賴。

npm install mobx mobx-react

2. 創(chuàng)建Redux或MobX的store：

• Redux：創(chuàng)建一個(gè)Redux store，包含應(yīng)用的狀態(tài)和邏輯。

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);
export default store;

• MobX：創(chuàng)建一個(gè)MobX的store，包含可觀察的狀態(tài)和動(dòng)作。

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;

3. 將store與React組件連接：

• Redux：使用react-redux的Provider組件將store提供給整個(gè)應(yīng)用。

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;

• MobX：使用mobx-react的Provider組件將store提供給整個(gè)應(yīng)用。

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;

4. 在React組件中使用store：

• Redux：使用react-redux的connect函數(shù)將store中的狀態(tài)和操作映射到組件的props中。

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);

• MobX：使用mobx-react的inject和observer函數(shù)將store中的狀態(tài)注入到組件中，并使組件成為可觀察的。

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));

通過(guò)以上步驟，在AntDesign項(xiàng)目中成功集成Redux或MobX并使用其管理應(yīng)用的狀態(tài)。