老规矩，我们先来放松一下，哈哈哈哈哈，看看我今日拍的美景！！！！

一、安装依赖

yarn add react-redux

yarn add rematch/core

yarn add redux-logger

二、明确思路

rematch是redux的二次封装，它没有多余的action types, action creators, switch语句或者thunks，它会通过model文件将state，reduce，async actions和action creators放在同一个地方（详细补充在最后）

三、正式开始

1、创建文件store/index.ts

import { init } from '@rematch/core'
import * as models from '../models/index'
import reduxLogger from 'redux-logger';

const store = init({
  models,
  redux: { middlewares: [reduxLogger], },
})

export default store

在示例中，我们使用 init 函数创建 Rematch store，并传递了一个(也可以是多个)包含模型的对象。我们还使用了 Redux Logger 中间件来记录每个 action 的状态变化。

最后，我们将创建好的 Rematch store 导出，以便在应用程序的其他部分使用。

通过集中处理 Redux 的配置和初始化工作，store 文件使得 Redux 的集成更加方便和可维护，同时也使得代码更加清晰和可读。

2、创建文件models/index.ts

export const count = {
    state: 0, // initial state
    reducers: {
      increment(state, payload) {
        return state + payload
      }
    },
    effects: {
      async incrementAsync(payload, rootState) {
        await new Promise(resolve => setTimeout(resolve, 1000))
        this.increment(payload)
      }
    }
}

在 Rematch 中，models 文件用于定义应用程序的模型（models）。模型是组织和管理 Redux 状态、reducer、异步 actions 和 action creators 的主要方式。

一个 models 文件通常包含多个模型的定义，每个模型由一个对象表示。每个模型对象包含以下属性：

name（可选）：模型的名称。它可以用于在代码中引用该模型。

state：模型的初始状态。这是一个普通的 JavaScript 对象，定义了模型的初始数据。

reducers：定义了处理 action 的 reducer 函数。每个 reducer 函数接收当前状态和 action 作为参数，并返回更新后的状态。

effects（可选）：定义了处理异步操作的 effects 函数。每个 effect 函数可以执行异步操作，并可以使用 dispatch、getState 和 select 方法来访问 Redux 的相关功能。

selectors（可选）：定义了从状态中派生衍生数据的 selectors 函数。每个 selector 函数接收整个状态作为参数，并根据需要计算和返回派生数据。

通过定义多个模型，你可以将相关的状态、reducer、异步 actions 和 action creators 组织在一起，使代码更加模块化和可维护。

3、修改入口文件

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import store  from './store/index'

import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
    <Provider store={store}>
      <App />
    </Provider>
)

Provider 是 react-redux 库中提供的一个组件，用于在 React 应用程序中将 Redux 的 store 传递给所有的组件。它是 React 和 Redux 之间的桥梁，使得 Redux 的状态和操作能够在整个应用程序中被访问和使用。

在 Redux 中，store 是一个包含应用程序状态的对象。它是 Redux 的核心部分，用于存储和管理应用程序的数据。store 中的数据是不可直接修改的，只能通过分发 action 来改变状态。同时，store 提供了一些方法，如 dispatch、getState 和 subscribe，用于分发 action、获取状态和监听状态的变化。

使用 Provider 组件，你可以将 Redux 的 store 传递给 React 应用程序中的所有组件，使得每个组件都能够访问和使用 Redux 的状态和操作。

4、修改组件

import './App.css'
import { connect } from 'react-redux'
import store from './store/index'

function App(props: any) {


  const { dispatch } = store

  return (
    <>
      <div>The count is {props.count}</div>
      <button onClick={props.increment}>点击</button>
      <button onClick={props.incrementAsync}>异步点击</button>
      <button onClick={() => dispatch({type: 'count/increment', payload: 1})}>点击</button>
      <button onClick={() => dispatch.count.increment(1)}>点击</button>
      <button onClick={() => dispatch({type: 'count/incrementAsync', payload: 1})}>异步点击</button>
      <button onClick={() => dispatch.count.incrementAsync(1)}>异步点击</button>
    </>
  )
}

const mapState = state => ({
  count: state.count
})

const mapDispatch = ({ count: { increment, incrementAsync}}) => ({
  increment: () => increment(1),
  incrementAsync: () => incrementAsync(1)
})

export default connect(mapState, mapDispatch)(App)

通过 import { connect } from 'react-redux' 导入了 react-redux 库中的 connect 函数，该函数用于连接 Redux 的状态和操作到 React 组件。
接下来，通过 import store from './store/index' 导入了 Redux 的 store 对象，该对象用于分发 actions。
App 组件是一个函数组件，接收 props 参数。在组件中，我们使用解构赋值从 store 中获取 dispatch 方法，以便后续分发 actions。
前两个按钮，一个是 onClick={props.increment}，用于增加计数器的值；另一个是 onClick={props.incrementAsync}，用于异步增加计数器的值。这些按钮的点击事件会触发相应的 action creators，并将操作分发给 Redux 的 store。
第三第四，两个按钮，使用了 dispatch 方法来直接分发 actions。一个是 dispatch({type: 'count/increment', payload: 1})，用于增加计数器的值；另一个是 dispatch.count.increment(1)，使用了类似的可访问的 action creator 来增加计数器的值。这些按钮点击事件直接将操作分发给 Redux 的 store。
最后两个按钮，与前两个按钮类似，但是触发的是异步的 actions。一个是 dispatch({type: 'count/incrementAsync', payload: 1})，用于异步增加计数器的值；另一个是 dispatch.count.incrementAsync(1)，使用了类似的可访问的异步 action creator 来异步增加计数器的值。
最后，通过 connect(mapState, mapDispatch)(App) 将 App 组件与 Redux 的状态和操作进行连接，使其能够访问和使用 Redux 的数据。mapState 函数将 Redux 的状态映射到组件的 props 上，mapDispatch 函数将 action creators 映射到组件的 props 上。

通过这样的配置，App 组件可以访问 Redux 的状态和操作，并根据需要进行状态更新和操作分发。它还可以响应用户的交互，并触发相应的 action 来改变 Redux 的状态。

最后的最后，求求大家点赞关注➕收藏哦!!!!! 谢谢大家

补充

在 Rematch 中，你可以通过创建一个或多个模型（models）来组织你的应用程序的状态和逻辑。每个模型都由一个对象表示，该对象包含状态、reducer、异步 actions 和 action creators 的定义。这种方式使得相关的代码能够被组织在一起，并且更容易管理和维护。

使用 Rematch，你不需要显式地定义 action types、action creators 或编写 switch 语句来处理不同的 action。相反，Rematch 使用一种自动化的机制，根据模型的定义自动生成 action types 和 action creators。这使得你可以更专注于编写 reducer 和处理状态的逻辑，而不必担心手动维护大量的 action 相关的代码。

此外，Rematch 还提供了简化异步操作的功能，你可以在模型中定义异步 actions 和 action creators，而不需要编写额外的 thunk 函数或处理复杂的异步逻辑。Rematch 为异步操作提供了内置的支持，并允许你以更直观和简洁的方式编写异步代码。

总结起来，Rematch 是 Redux 的二次封装，它通过模型（models）的方式将状态、reducer、异步 actions 和 action creators 放在同一个地方，并自动处理 action types 和 action creators 的生成，简化了 Redux 的使用。这种封装方式使得开发者能够更加专注于业务逻辑而不必担心繁琐的 Redux 配置和手动编写大量的 action 相关的代码。

rematch小demo