Rematch项目中的TypeScript集成指南

Rematch项目中的TypeScript集成指南

rematch The Redux Framework 项目地址: https://gitcode.com/gh_mirrors/re/rematch

前言

Rematch作为Redux的轻量级封装，提供了更简洁的状态管理方案。本文将详细介绍如何在Rematch项目中完美集成TypeScript，以获得更好的类型安全和开发体验。

核心概念

1. 模型创建

Rematch提供了createModel辅助函数来创建类型化的模型：

import { createModel } from '@rematch/core'
import { RootModel } from "./models"

export const count = createModel<RootModel>()({
  state: 0,  // 初始状态
  reducers: {
    increment(state, payload: number) {
      return state + payload
    },
  },
  effects: (dispatch) => ({
    incrementAsync(payload: number, state) {
      dispatch.count.increment(payload)
    },
  }),
})

对于复杂状态类型，可以使用类型断言：

type ComplexState = {
  count: number
  multiplierName: string
}

export const count = createModel<RootModel>()({
  state: {
    count: 0,
    multiplierName: 'default',
  } as ComplexState,
  // ...其他配置
})

2. 根模型定义

根模型是项目所有模型的集合，它为跨模型访问提供类型支持：

import { Models } from "@rematch/core"
import { count } from "./count"

export interface RootModel extends Models<RootModel> {
  count: typeof count
}

export const models: RootModel = { count }

存储初始化

基础初始化

import { init, RematchDispatch, RematchRootState } from '@rematch/core'
import { models, RootModel } from './models'

export const store = init({
  models,
})

// 导出常用类型
export type Store = typeof store
export type Dispatch = RematchDispatch<RootModel>
export type RootState = RematchRootState<RootModel>

使用插件时的初始化

当使用如@rematch/loading等插件时，需要扩展类型：

import loadingPlugin, { ExtraModelsFromLoading } from '@rematch/loading'

type FullModel = ExtraModelsFromLoading<RootModel>

export const store = init<RootModel, FullModel>({
  models,
  plugins: [loadingPlugin()]
})

React集成

函数组件使用

useSelector

import { RootState } from './store'
import { useSelector } from 'react-redux'

function Component() {
  const count = useSelector((state: RootState) => state.count)
  // ...
}

useDispatch

import { Dispatch } from './store'
import { useDispatch } from 'react-redux'

function Component() {
  const dispatch = useDispatch<Dispatch>()
  
  useEffect(() => {
    dispatch.count.incrementAsync(2)  // 自动补全和类型检查
  }, [])
}

类组件使用

import { connect } from 'react-redux'
import { RootState, Dispatch } from './store'

class App extends React.PureComponent<Props> {
  // ...
}

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

const mapDispatch = (dispatch: Dispatch) => ({
  countActions: dispatch.count,
})

type Props = ReturnType<typeof mapState> & ReturnType<typeof mapDispatch>

export default connect(mapState, mapDispatch)(App)

高级技巧

处理Effect返回值

当Effect需要返回值时，可能会遇到循环引用问题。解决方案是显式声明返回类型：

effects: (dispatch) => ({
  async incrementAsync(payload: number, state): Promise<number> {
    dispatch.count.increment(payload)
    return state.count
  },
})

最佳实践建议

1. 尽量将业务逻辑放在reducers中
2. 保持effects简洁，仅处理异步操作
3. 复杂计算逻辑建议提取为纯函数
4. 避免在effects中返回数据，优先使用状态更新

总结

通过合理使用Rematch的TypeScript支持，开发者可以获得：

• 完整的类型推断
• 自动补全
• 编译时错误检查
• 更好的代码可维护性

遵循本文介绍的模式，可以构建类型安全且易于维护的Rematch应用。

rematch The Redux Framework 项目地址: https://gitcode.com/gh_mirrors/re/rematch