Implementing Middleware in TanStack Store

Detail the process of creating and applying middleware in TanStack Store for logging actions, showcasing the implementation and effect on dispatched actions.
import { createStore } from 'tanstack-store';

// Define a simple logger middleware
const loggerMiddleware = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
This piece creates a logger middleware using the createStore method from tanstack-store. The middleware logs the action being dispatched and the next state of the store after the action is processed.
const initialState = { counter: 0 };

// Action types

// Reducer function
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return { ...state, counter: state.counter + 1 };
      return state;
Defines the initial state and a simple reducer function for a counter, with an action to increment the counter.
const store = createStore({
  reducer: counterReducer,
  middleware: [loggerMiddleware]

// Dispatch an action
store.dispatch({ type: INCREMENT });
Creates a store with the counterReducer and applies the loggerMiddleware. Then, dispatches an INCREMENT action to demonstrate the middleware's logging effect.