How to migrate from rematch to rtk

[fazlulShanto]

is their any guide for this?

[markerikson]

Ah, Rematch. There's a name I haven't heard in a while :)

There aren't any specific guides out there for migrating from Rematch, because it was never widely used in the first place.

However, I'd recommend looking at the existing "Migrating to Modern Redux" docs page. That shows going from legacy hand-written Redux code to modern RTK. Not quite the same, but should give you the general ideas.

Looking at the Rematch docs, it looks like a "model" is pretty close to createSlice.

Went ahead and threw this into Claude and it came up with this guide. Matches my understanding of Rematch's API:

---

Rematch → RTK Migration Guide

Core Concept Mapping

Rematch	RTK Equivalent
model	createSlice
state	initialState
reducers	reducers
effects	Thunks (via create.asyncThunk or standalone createAsyncThunk)
baseReducer	extraReducers
selectors (plugin)	Standalone selectors with createSelector (Reselect)

---

Example 1: Basic Model → Slice

Rematch:

export const countModel = {
  state: { counter: 0 },
  reducers: {
    add: (state, payload) => ({
      ...state,
      counter: state.counter + payload,
    }),
  },
  effects: {
    async loadData(payload, rootState) {
      const response = await fetch(`http://example.com/${payload}`)
      const data = await response.json()
      this.add(data) // dispatch local reducer
    },
  },
}

RTK 2.x (with create.asyncThunk):

import { buildCreateSlice, asyncThunkCreator } from '@reduxjs/toolkit'

const createAppSlice = buildCreateSlice({
  creators: { asyncThunk: asyncThunkCreator },
})

const countSlice = createAppSlice({
  name: 'count',
  initialState: { counter: 0 },
  reducers: (create) => ({
    add: create.reducer<number>((state, action) => {
      state.counter += action.payload
    }),
    loadData: create.asyncThunk(
      async (payload: string, thunkApi) => {
        const response = await fetch(`http://example.com/${payload}`)
        return response.json()
      },
      {
        fulfilled: (state, action) => {
          state.counter += action.payload
        },
      }
    ),
  }),
})

export const { add, loadData } = countSlice.actions

RTK (classic approach with separate thunk):

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

export const loadData = createAsyncThunk(
  'count/loadData',
  async (payload: string) => {
    const response = await fetch(`http://example.com/${payload}`)
    return response.json()
  }
)

const countSlice = createSlice({
  name: 'count',
  initialState: { counter: 0 },
  reducers: {
    add: (state, action) => {
      state.counter += action.payload
    },
  },
  extraReducers: (builder) => {
    builder.addCase(loadData.fulfilled, (state, action) => {
      state.counter += action.payload
    })
  },
})

---

Example 2: Effects That Dispatch Other Models

Rematch:

effects: (dispatch) => ({
  async triggerData(payload, rootState) {
    console.log(rootState.example)
    await dispatch.count.loadData(payload) // cross-model dispatch
  },
}),

RTK:

export const triggerData = createAsyncThunk(
  'example/triggerData',
  async (payload: string, { getState, dispatch }) => {
    const state = getState() as RootState
    console.log(state.example)
    await dispatch(loadData(payload)) // just dispatch the thunk
  }
)

Key difference: RTK thunks receive { dispatch, getState, extra, ... } as second arg. You import and dispatch other thunks directly—no magic this binding.

---

Example 3: Cross-Model Reducers (listening to other slices)

Rematch supports listening via string keys like 'otherModel/actionName':

reducers: {
  'user/logout': (state) => initialState, // reset on logout
}

RTK:

// In the other slice:
export const logout = createAction('user/logout')

// In your slice:
const mySlice = createSlice({
  name: 'myModel',
  initialState,
  reducers: { /* ... */ },
  extraReducers: (builder) => {
    builder.addCase(logout, () => initialState)
  },
})

Or with string matching:

extraReducers: (builder) => {
  builder.addMatcher(
    (action) => action.type === 'user/logout',
    () => initialState
  )
}

---

Plugin Migration

@rematch/loading → RTK approach

Rematch's loading plugin auto-tracks pending/fulfilled/rejected for all effects. RTK doesn't have this built-in, but patterns exist:

Option A: Track per-thunk manually

interface CountState {
  counter: number
  loadDataStatus: 'idle' | 'loading' | 'succeeded' | 'failed'
}

const countSlice = createSlice({
  name: 'count',
  initialState: { counter: 0, loadDataStatus: 'idle' } as CountState,
  reducers: { /* ... */ },
  extraReducers: (builder) => {
    builder
      .addCase(loadData.pending, (state) => {
        state.loadDataStatus = 'loading'
      })
      .addCase(loadData.fulfilled, (state, action) => {
        state.loadDataStatus = 'succeeded'
        state.counter += action.payload
      })
      .addCase(loadData.rejected, (state) => {
        state.loadDataStatus = 'failed'
      })
  },
})

Option B: Use RTK Query (if you're fetching data)

RTK Query handles loading/error states automatically—this is the modern replacement for manual loading tracking:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: 'http://example.com' }),
  endpoints: (build) => ({
    getData: build.query<number, string>({
      query: (id) => `/${id}`,
    }),
  }),
})

// In component:
const { data, isLoading, isError } = useGetDataQuery('123')

@rematch/select → Reselect (already included in RTK)

RTK re-exports createSelector from Reselect. The Rematch slice helper is just sugar for (state) => state.modelName.

Rematch:

selectors: (slice, createSelector) => ({
  total() {
    return slice((cart) => cart.reduce((a, b) => a + b.price * b.amount, 0))
  },
  totalWithShipping() {
    return createSelector(
      slice,
      (_, props) => props.shipping,
      (cart, shipping) => cart.reduce((a, b) => a + b.price * b.amount, shipping)
    )
  },
})

RTK:

import { createSelector } from '@reduxjs/toolkit'

const selectCart = (state: RootState) => state.cart

export const selectTotal = createSelector(selectCart, (cart) =>
  cart.reduce((a, b) => a + b.price * b.amount, 0)
)

export const selectTotalWithShipping = createSelector(
  [selectCart, (_, shipping: number) => shipping],
  (cart, shipping) => cart.reduce((a, b) => a + b.price * b.amount, shipping)
)

Cross-model selectors work the same—just import and compose:

import { selectPopularityPastDay } from './popularitySlice'

export const selectProductsPopularity = createSelector(
  [selectCart, selectPopularityPastDay],
  (cart, hot) => cart.toSorted((a, b) => hot[b.productId] - hot[a.productId])
)

@rematch/persist → redux-persist (same library)

Rematch's persist plugin is just a wrapper around redux-persist. RTK works directly with redux-persist:

import { configureStore } from '@reduxjs/toolkit'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const persistConfig = { key: 'root', storage }
const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE'],
      },
    }),
})

Custom Plugins → RTK Patterns

Rematch plugins hook into store creation lifecycle with callbacks like onReducer, onModel, onStoreCreated, and createMiddleware. RTK doesn't have a plugin abstraction, but the underlying capabilities are exposed directly:

Rematch Plugin Hook	RTK Equivalent
createMiddleware	configureStore({ middleware: (getDefault) => getDefault().concat(myMiddleware) })
config.redux.middlewares	Same as above
onRootReducer (wrap reducer)	Wrap reducer before passing to configureStore, or use combineSlices
onStoreCreated (add store props)	Just add properties to store after creation, or use enhancers
config.redux.enhancers	configureStore({ enhancers: (getDefault) => getDefault().concat(myEnhancer) })
exposed (cross-plugin state)	Not needed—just use module-level variables or store properties

Example: Rematch plugin that adds middleware + store method

// Rematch
const myPlugin = {
  createMiddleware: (bag) => (store) => (next) => (action) => {
    console.log('action:', action.type)
    return next(action)
  },
  onStoreCreated(store) {
    store.customMethod = () => console.log('hello')
    return store
  },
}

// RTK
const loggingMiddleware: Middleware = (store) => (next) => (action) => {
  console.log('action:', action.type)
  return next(action)
}

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefault) => getDefault().concat(loggingMiddleware),
})

// Add custom method directly
store.customMethod = () => console.log('hello')

Example: Wrapping the root reducer (like onRootReducer)

// For things like redux-persist or reset-on-logout
const rootReducer = combineReducers({ /* slices */ })

const wrappedReducer: typeof rootReducer = (state, action) => {
  if (action.type === 'RESET') {
    return rootReducer(undefined, action)
  }
  return rootReducer(state, action)
}

const store = configureStore({ reducer: wrappedReducer })

The general philosophy: RTK exposes Redux's extension points directly rather than abstracting them behind a plugin system. Most Rematch plugins were thin wrappers anyway.

---

Effects → Listener Middleware (for Reactive Logic)

Rematch effects map to thunks for user-initiated async work. But some effects are more "reactive"—they respond to other actions or state changes. RTK's listener middleware is often a better fit for these.

When to use what:

Pattern	Use
User clicks button → fetch data → update state	Thunk (createAsyncThunk)
When action X fires, also do Y	Listener middleware
When state.foo changes, trigger side effect	Listener middleware
Complex async workflows with cancellation	Listener middleware

Example: Effect that reacts to another action

// Rematch - effect that fires when something else happens
effects: (dispatch) => ({
  async onUserLogin(payload, rootState) {
    // fetch user preferences after login
    const prefs = await fetchPreferences(payload.userId)
    dispatch.preferences.set(prefs)
  },
}),
// Called manually: dispatch.auth.onUserLogin(user)

// RTK Listener - automatically reacts to login action
import { createListenerMiddleware } from '@reduxjs/toolkit'

const listenerMiddleware = createListenerMiddleware()

listenerMiddleware.startListening({
  actionCreator: loginSuccess, // from auth slice
  effect: async (action, listenerApi) => {
    const prefs = await fetchPreferences(action.payload.userId)
    listenerApi.dispatch(preferencesSlice.actions.set(prefs))
  },
})

// Add to store
const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefault) => getDefault().prepend(listenerMiddleware.middleware),
})

Example: Effect that watches state changes

listenerMiddleware.startListening({
  predicate: (action, currentState, previousState) => {
    return currentState.cart.items.length !== previousState.cart.items.length
  },
  effect: async (action, listenerApi) => {
    // Sync cart to server whenever items change
    await syncCartToServer(listenerApi.getState().cart)
  },
})

Example: Cancellable effect (listener advantage)

listenerMiddleware.startListening({
  actionCreator: startPolling,
  effect: async (action, listenerApi) => {
    while (true) {
      const data = await fetchLatestData()
      listenerApi.dispatch(dataReceived(data))
      
      // Wait 5s, but cancel if stopPolling fires
      const result = await listenerApi.condition(stopPolling.match, 5000)
      if (result) break // stopPolling was dispatched
    }
  },
})

This kind of cancellation-aware async logic is awkward with thunks but natural with listeners.