React/ReactNative 状态管理: rematch 如何使用

Rematch 是一个用于管理 React 和 React Native 应用状态的库。它提供了一个简单但功能强大的状态管理解决方案。

以下是一个简单的使用 Rematch 的示例：

首先，安装 Rematch：

npm install rematch

然后，创建一个 Rematch 存储（store）：

import { init } from '@rematch/core';
 
const count = {
  state: 0,
  reducers: {
    increment: (state, payload) => state + payload,
  },
};
 
const store = init({
  models: { count },
});
 
export default store;

在你的 React 组件中使用 Rematch 的状态和更改状态的方法：

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import store from './store'; // 引入你创建的store
 
const CounterComponent = () => {
  // 使用 useSelector 选择状态
  const count = useSelector(state => state.count);
  // 使用 useDispatch 调度一个 action
  const dispatch = useDispatch();
 
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(store.actionCreators.count.increment(5))}>
        Increment
      </button>
    </>
  );
};
 
export default CounterComponent;

在这个例子中，我们定义了一个名为 count 的 model，它包含一个 state 初始值为 0 和一个 reducers 方法 increment，该方法用于增加计数。在组件中，我们使用 useSelector 来访问状态，并使用 useDispatch 来派发 action。