Design: Adding a createReducerSelector

[christiankaseburg]

Hello,

I have come across a problem of updating many atoms at once and being able to share the logic between components without adding more unnecessary overhead. Recently I have switched from redux to Recoil and started working on a reducer like pattern to manage complex state mutations. My main goal is to be able to maintain the logic for these complex state updates in a single place so they can be shared across components via recoil hooks.

Please give me some feedback if you know of better alternatives than this approach.

useReducerRecoilState - A wrapper function around useRecoilState for exposing the correct types.
createReducerSelector - Utility function for creating reducer selectors.

createReducerSelector.ts

import { selector, RecoilState, useRecoilState, SetterOrUpdater, SetRecoilState, GetRecoilValue, ResetRecoilState  } from 'recoil'

type SelectorOptions = {
    get: GetRecoilValue
    set: SetRecoilState
    reset: ResetRecoilState
}

// "as unknown as [T, SetterOrUpdater<A>]" cast is a hack to get the correct types.
const useReducerRecoilState = <T, A>(recoilState: RecoilState<T>) => useRecoilState(recoilState) as unknown as [T, SetterOrUpdater<A>]

const createReducerSelector = <T, A>({ selectorKey, selectorAtom, reducer }: {
	selectorKey: string
	selectorAtom: RecoilState<T>
	reducer: (state: T, options: SelectorOptions, action: A ) => T
}) => selector<T>({
	  key: selectorKey,
	  get: ({ get }) => get(selectorAtom),
	  set: (options, action: A) => {
		const { get, set } = options

		set(selectorAtom, reducer(get(selectorAtom), options, action))
	  }
}) as RecoilState<T>


export type { SelectorOptions }
export { useReducerRecoilState, createReducerSelector }

Simple example using an atom that manages a list of tasks where each task atom is subscribable by id to prevent unnecessary updates in other components. For the simplicity of this example I am not including a atom effect to manage syncing the state with browser storage.

atoms.ts

import { atom, atomFamily } from 'recoil'

type TaskAtomType = {
   id: string
   name: string
   description: string | null
}

type TaskListAtomType = {
   tasks: Array<string>
   selectedTask: string | null
   selectedIndex: number | null
}

const taskListAtom = atom<TaskListAtomType >({
	key: 'taskListAtom ',
	default: {
		tasks: [],
		selectedTask: null,
		selectedIndex: null
	}
})

const taskAtomFamily = atomFamily<TaskAtomType, string>({
   key: 'taskAtomFamily',
   default: (id) => ({
      id,
      name: id,
      description: null
   })
})

export type { TaskAtomType, TaskListAtomType }
export { taskListAtom, taskAtomFamily }

selectors.ts

import { selector } from 'recoil'
import { taskListAtom , TaskAtomFamily   } from './atoms'

const getAllTasksSelector = selector({
   key: 'currentSelectedTaskSelector',
   get: ({ get }) => {
      const { tasks } = get(taskListAtom )

      if(tasks.length) return []

      const tasks = tasks.map((taskId) => get(TaskAtomFamily(taskId))

      return tasks
   }
})

const currentSelectedTaskSelector = selector({
   key: 'currentSelectedTaskSelector',
   get: ({ get }) => {
      const { selectedTask } = get(taskListAtom )

      if(!selectedTask) return null

      return get(TaskAtomFamily(selectedTask))
   }
})

export { currentSelectedTaskSelector }

Now, I have a reducer example where I will manage deletions of tasks.

Reducer Example
taskListReducerSelector.ts

import { createReducerSelector, SelectorOptions } from './createReducerSelector'
import { taskListAtom , TaskListAtomType, taskAtomFamily } from './atoms'

type TaskListAction = { type: 'REMOVE', payload: { index: number } }

const taskListReducer = (state: TaskListAtomType, options: SelectorOptions, action: TaskListAction) => {
   const { get, set, reset } = options

   switch(action.type) {
      case 'REMOVE': {
         const { index } = action.payload
         const removeTaskId = state.tasks[index]

         const newSelectedIndex = state.tasks[index] === removeTaskId ? null : state.selectedIndex
         const filteredTaskList = state.tasks.filter((id) => id === removeTaskId)

         // Clean up.
         reset(taskAtomFamily(removeTaskId))

         return {
            tasks: filteredTaskList,
            selectedTask: state.selectedTask === removeTaskId ? null : state.selectedTask,
            selectedIndex: newSelectedIndex
         }
      }
      default:
         return state
   } 
}

const taskListReducerSelector = createReducerSelector<TaskListAtomType, TaskListAction>({
   selectorKey: 'taskListReducerSelector'
   selectorAtom: taskListAtom
   reducer: taskListReducer
})

export { taskListReducerSelector  }

Usage example

import { useReducerRecoilState  } from './createReducerSelector'
import { taskListReducerSelector } from  './taskListReducerSelector'

// Example usage of hook wrapper
const [listAtomState, listAtomDispatcher] = useReducerRecoilState(taskListReducerSelector)

// Example Usage of dispatch
const removeTask = (index: number) => listAtomDispatch({type: 'REMOVE', payload: { index })

As you can see I have a task list atom that manages a reference to my collection of task atoms by id. When I choose to remove a task from my list atom I will need to reset a task atom or if I want to add an atom I could add some overrides for setting the default state of a new task atom. My point is that managing state can get complicated when you need to add, remove, load, or update many atoms at once.

Does this seem like a weird pattern? Should I encapsulate this logic in a component and pass the functionality down to children components via props?

Note: I wrote all this in this discussion so some of the examples may contain typos or logic errors, but this is just a simple example showing a use case of this pattern.

[drarmstr]

You may want to consider useRecoilCallback() for reducer style patterns vs a selector.

[christiankaseburg]

Thanks for the idea. I could create a hook called useTaskListDispatcher that offers the same reducer functionality with the useRecoilCallback hook. Would you suggest using the snapshot from the callback interface when I need to read atom states?

[christiankaseburg]

Does my example below match what you were thinking with using useRecoilCallback?

useTaskListDispatcher.ts

import { useRecoilCallback } from 'recoil'
import { taskListAtom } from './atoms'

type TaskListAction = { type: 'REMOVE', payload: { index: number } }

const useTaskListDispatcher = () => {

   const dispatcher = useRecoilCallback(({ snapshot, gotoSnapshot, set, reset }) => (action: TaskListAction) => {
      const state = snapshot.getLoadable(taskListAtom).contents

      switch(action.type) {
         case 'REMOVE': {
            const { index } = action.payload
            const removeTaskId = state.tasks[index]

            const newSelectedIndex = state.tasks[index] === removeTaskId ? null : state.selectedIndex
            const filteredTaskList = state.tasks.filter((id) => id === removeTaskId)

            // Clean up.
            reset(taskAtomFamily(removeTaskId))

            set(taskListAtom, ({
               tasks: filteredTaskList,
               selectedTask: state.selectedTask === removeTaskId ? null : state.selectedTask,
               selectedIndex: newSelectedIndex
            }))

            break
         }
         default:
            break
      }

   })

return dispatcher
}

export { useTaskListDispatcher }

[drarmstr]

Yeah, also note the upcoming API useRecoilTransaction_UNSTABLE() that's in the nightly build.