如何在AntDesign項目中集成Redux或MobX

在AntDesign項目中集成Redux或MobX，可以按照以下步驟進行：

1. 安裝Redux或MobX相關的依賴：

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

npm install redux react-redux

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

npm install mobx mobx-react

2. 創建Redux或MobX的store：

• Redux：創建一個Redux store，包含應用的狀態和邏輯。

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

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

• MobX：創建一個MobX的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;

3. 將store與React組件連接：

• Redux：使用react-redux的Provider組件將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;

• MobX：使用mobx-react的Provider組件將store提供給整個應用。

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函數將store中的狀態和操作映射到組件的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函數將store中的狀態注入到組件中，并使組件成為可觀察的。

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并使用其管理應用的狀態。