feat: do not add to history when the present state did not change (#337)

Author: frontendphil

src/createReducer.spec.ts

@@ -4,6 +4,7 @@ import {
   CountActions,
   countReducer,
   increment,
+  noop,
 } from "./fixtures"
 
 describe("create reducer", () => {
@@ -62,12 +63,25 @@ describe("create reducer", () => {
 
       const untrackedState = reducer(
         { past: () => [0], present: () => 1, future: () => [2] },
-        increment()
+        increment(),
       )
 
       expect(untrackedState.past()).toEqual([0])
       expect(untrackedState.present()).toEqual(2)
       expect(untrackedState.future()).toEqual([2])
     })
+
+    it("does not change past, present, and future when the state did not update", () => {
+      const reducer = createReducer(countReducer)
+
+      const updatedState = reducer(
+        { past: () => [0], present: () => 1, future: () => [2] },
+        noop(),
+      )
+
+      expect(updatedState.past()).toEqual([0])
+      expect(updatedState.present()).toEqual(1)
+      expect(updatedState.future()).toEqual([2])
+    })
   })
 })

src/createReducer.ts

@@ -6,7 +6,7 @@ export type UndoRedoState<Present> = {
 
 export type PresentReducer<Present, Actions> = (
   state: Present,
-  action: Actions
+  action: Actions,
 ) => Present
 
 export type UndoRedoOptions<Actions> = {
@@ -15,7 +15,7 @@ export type UndoRedoOptions<Actions> = {
 
 export type UndoRedoReducer<Present, Actions> = (
   state: UndoRedoState<Present>,
-  action: Actions
+  action: Actions,
 ) => UndoRedoState<Present>
 
 const enum UndoRedoActionTypes {
@@ -37,11 +37,11 @@ const trackAll = () => true
 
 export function createReducer<Present, Actions extends {}>(
   presentReducer: PresentReducer<Present, Actions>,
-  { track = trackAll }: UndoRedoOptions<Actions> = {}
+  { track = trackAll }: UndoRedoOptions<Actions> = {},
 ): UndoRedoReducer<Present, UndoRedoActions<Actions>> {
   return function reducer(
     state: UndoRedoState<Present>,
-    action: UndoRedoActions<Actions>
+    action: UndoRedoActions<Actions>,
   ): UndoRedoState<Present> {
     if ("type" in action) {
       if (action.type === UndoRedoActionTypes.UNDO) {
@@ -68,6 +68,7 @@ export function createReducer<Present, Actions extends {}>(
     }
 
     const isTrackableAction = track(action)
+
     if (!isTrackableAction) {
       return {
         past: () => state.past(),
@@ -76,12 +77,22 @@ export function createReducer<Present, Actions extends {}>(
       }
     }
 
-    const past = [state.present(), ...state.past()]
-    const present = presentReducer(state.present(), action)
+    const present = state.present()
+    const nextPresent = presentReducer(state.present(), action)
+
+    if (present === nextPresent) {
+      return {
+        past: () => state.past(),
+        present: () => present,
+        future: () => state.future(),
+      }
+    }
+
+    const past = [present, ...state.past()]
 
     return {
       past: () => past,
-      present: () => present,
+      present: () => nextPresent,
       future: () => [],
     }
   }

src/fixtures/countReducer.ts

@@ -3,6 +3,7 @@ import invariant from "tiny-invariant"
 export enum CountActionTypes {
   INCREMENT = "@@count/increment",
   DECREMENT = "@@count/decrement",
+  NOOP = "@@count/noop",
 }
 
 type IncrementAction = {
@@ -13,7 +14,11 @@ type DecrementAction = {
   type: CountActionTypes.DECREMENT
 }
 
-export type CountActions = IncrementAction | DecrementAction
+type NoOpAction = {
+  type: CountActionTypes.NOOP
+}
+
+export type CountActions = IncrementAction | DecrementAction | NoOpAction
 
 export const countReducer = (state: number, action: CountActions): number => {
   invariant(state != null, "Count reducer needs an initial state")
@@ -23,12 +28,19 @@ export const countReducer = (state: number, action: CountActions): number => {
       return state + 1
     case CountActionTypes.DECREMENT:
       return state - 1
+    case CountActionTypes.NOOP:
+      return state
     default:
       invariant(false, "Count reducer received an unknown action.")
   }
 }
 
-export const increment = (): IncrementAction =>
-  ({ type: CountActionTypes.INCREMENT } as const)
-export const decrement = (): DecrementAction =>
-  ({ type: CountActionTypes.DECREMENT } as const)
+export const increment = (): IncrementAction => ({
+  type: CountActionTypes.INCREMENT,
+})
+
+export const decrement = (): DecrementAction => ({
+  type: CountActionTypes.DECREMENT,
+})
+
+export const noop = (): NoOpAction => ({ type: CountActionTypes.NOOP })

src/fixtures/index.ts

@@ -1 +1,7 @@
-export { countReducer, CountActions, CountActionTypes, increment } from "./countReducer"
+export {
+  countReducer,
+  CountActions,
+  CountActionTypes,
+  increment,
+  noop,
+} from "./countReducer"