1
import { configureStore } from '@reduxjs/toolkit';
2
import counterReducer from '../features/counter/counterSlice';
3

4
export const store = configureStore({
5
  reducer: {
6
    counter: counterReducer,
7
  },
8
});

1
import { createSlice } from '@reduxjs/toolkit';
2

3
export const counterSlice = createSlice({
4
  name: 'counter',
5
  initialState: {
6
    value: 0,
7
  },
8
  reducers: {
9
    increment: (state) => {
10
      // Redux Toolkit允许我们在reducers中直接修改state，它会自动处理不可变性
11
      state.value += 1;
12
    },
13
    decrement: (state) => {
14
      state.value -= 1;
15
    },
16
    incrementByAmount: (state, action) => {
17
      state.value += action.payload;
18
    },
19
  },
20
});
21

22
// 导出action creators
23
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
24

25
// 导出reducer
26
export default counterSlice.reducer;

1
import React from 'react';
2
import ReactDOM from 'react-dom/client';
3
import App from './App';
4
import { store } from './app/store';
5
import { Provider } from 'react-redux';
6

7
const root = ReactDOM.createRoot(document.getElementById('root'));
8
root.render(
9
  <React.StrictMode>
10
    <Provider store={store}>
11
      <App />
12
    </Provider>
13
  </React.StrictMode>
14
);

1
import React from 'react';
2
import { useSelector, useDispatch } from 'react-redux';
3
import { increment, decrement, incrementByAmount } from './features/counter/counterSlice';
4

5
function App() {
6
  // 使用useSelector获取state
7
  const count = useSelector((state) => state.counter.value);
8
  // 使用useDispatch获取dispatch函数
9
  const dispatch = useDispatch();
10

11
  return (
12
    <div>
13
      <h1>Redux Counter Example</h1>
14
      <p>Count: {count}</p>
15
      <button onClick={() => dispatch(increment())}>Increment</button>
16
      <button onClick={() => dispatch(decrement())}>Decrement</button>
17
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
18
    </div>
19
  );
20
}
21

22
export default App;

1
import { makeAutoObservable } from 'mobx';
2

3
class CounterStore {
4
  count = 0;
5

6
  constructor() {
7
    // 自动将类的属性和方法转换为可观察的
8
    makeAutoObservable(this);
9
  }
10

11
  increment() {
12
    this.count += 1;
13
  }
14

15
  decrement() {
16
    this.count -= 1;
17
  }
18

19
  incrementByAmount(amount) {
20
    this.count += amount;
21
  }
22
}
23

24
// 导出单例
25
export const counterStore = new CounterStore();

1
import React from 'react';
2
import { observer } from 'mobx-react-lite';
3
import { counterStore } from './stores/counterStore';
4

5
// 使用observer高阶组件包装组件，使其响应状态变化
6
const App = observer(() => {
7
  return (
8
    <div>
9
      <h1>MobX Counter Example</h1>
10
      <p>Count: {counterStore.count}</p>
11
      <button onClick={() => counterStore.increment()}>Increment</button>
12
      <button onClick={() => counterStore.decrement()}>Decrement</button>
13
      <button onClick={() => counterStore.incrementByAmount(5)}>Increment by 5</button>
14
    </div>
15
  );
16
});
17

18
export default App;

1
import create from 'zustand';
2

3
export const useCounterStore = create((set) => ({
4
  count: 0,
5
  increment: () => set((state) => ({ count: state.count + 1 })),
6
  decrement: () => set((state) => ({ count: state.count - 1 })),
7
  incrementByAmount: (amount) => set((state) => ({ count: state.count + amount })),
8
}));

1
import React from 'react';
2
import { useCounterStore } from './stores/counterStore';
3

4
function App() {
5
  // 使用useCounterStore Hook获取状态和操作
6
  const count = useCounterStore((state) => state.count);
7
  const increment = useCounterStore((state) => state.increment);
8
  const decrement = useCounterStore((state) => state.decrement);
9
  const incrementByAmount = useCounterStore((state) => state.incrementByAmount);
10

11
  return (
12
    <div>
13
      <h1>Zustand Counter Example</h1>
14
      <p>Count: {count}</p>
15
      <button onClick={increment}>Increment</button>
16
      <button onClick={decrement}>Decrement</button>
17
      <button onClick={() => incrementByAmount(5)}>Increment by 5</button>
18
    </div>
19
  );
20
}
21

22
export default App;