如何在同一项目中使用Redux和MobX

npm install redux react-redux @reduxjs/toolkit mobx mobx-react-lite

// store.js
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
});

export default store;

// mobxStore.js
import { makeAutoObservable } from 'mobx';

class MobXStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

const mobxStore = new MobXStore();
export default mobxStore;

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';
import { observer } from 'mobx-react-lite';
import mobxStore from './mobxStore';

const App = () => {
  const countFromRedux = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch(increment());
  };

  const handleDecrement = () => {
    dispatch(decrement());
  };

  return (
    <div>
      <h1>Redux Count: {countFromRedux}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>

      <h1>MobX Count: {mobxStore.count}</h1>
      <button onClick={() => mobxStore.increment()}>Increment</button>
      <button onClick={() => mobxStore.decrement()}>Decrement</button>
    </齐
  );
};

export default observer(App);

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Provider as MobXProvider } from 'mobx-react';
import store from './store';
import App from './App';
import mobxStore from './mobxStore';

ReactDOM.render(
  <Provider store={store}>
    <MobXProvider instance={mobxStore}>
      <App />
    </MobXProvider>
  </Provider>,
  document.getElementById('root')
);