useContext + useReducer の使いどころ

const familyTree = {
  child: { name: 'Smith', age: 28 },
  grandchild: { name: 'Alice', age: 1 },
} as const

const FamilyTreeContext = React.createContext<typeof familyTree>(null)

const Parent: React.VFC = () => (
  <FamilyTreeContext.Provider value={familyTree}>
    <Child />
  </FamilyTreeContext.Provider>
)

const Child: React.VFC = () => {
  const { child } = useContext(FamilyTreeContext)

  return (
    <main>
      <div>
        <p>name: {child.name}</p>
        <p>age: {child.age}</p>
      </div>

      <GrandChild />
    </main>
  )
}

const GrandChild: React.VFC = () => {
  const { grandchild } = useContext(FamilyTreeContext)

  return (
    <div>
      <p>name: {grandchild.name}</p>
      <p>age: {grandchild.age}</p>
    </div>
  )
}

type State = { count: number }

const initialState = { count: 0 }

type Action = 
  | { type: 'increment' } 
  | { type: 'decrement' }
  | { type: 'reset' }

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    case 'reset':
      return initialState
    default:
      return state
  }
}

const Counter: React.FC = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'increment' })}>reset</button>
    </>
  )
}

// reducer 等は省略

const useCounter = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  const increment = () => dispatch({ type: 'increment' })
  const decrement = () => dispatch({ type: 'decrement' })
  const reset = () => dispatch({ type: 'reset' })

  return { state, increment, decrement, reset } as const
}

const Counter: React.VFC = () => {
  const { state, increment, decrement, reset } = useCounter()

  return (
    <>
      Count: {state.count}
      <button onClick={increment}>-</button>
      <button onClick={decrement}>+</button>
      <button onClick={reset}>reset</button>
    </>
  )
}

import {AliasName, AliasLabel, PublisherName, TargetName, TargetLabel} from './types'

type SearchConditionConfig = {
  // 省略
}

// コンテキストオブジェクトの state の型
type State = {
  aliases: SearchConditionConfig['aliases']
  target: SearchConditionConfig['targets']['name']
  releaseYear: SearchConditionConfig['releaseYears'][number]
  publishers: SearchConditionConfig['publishers']
}

// type Action, initialState は省略

const initialState = {
  // 省略
}

const reducer = (state, action) => {
  // 省略
}

export const SearchConditionContext = createContext<State | Action>(initialState)

SearchConditionContext.displayName = 'SearchCondition'

// Context Object の Provider（提供側）コンポーネントを返す
const SearchConditionProvider: React.FC = (props) => {
  const [state, dispatch] = useReducer(reducer, initialState)

  // 出版社のチェックボックスをつけたり外したりする
  const togglePublisherByName = (name: PublisherName) => dispatch({ type: 'TOGGLE_PUBLISHER', name })
  // 全ての出版社を選択する
  const selectAllPublisher = () => dispatch({ type: 'SELECT_ALL_PUBLISHER' })
  // 全ての出版社のチェックを外す
  const clearAllPublisher = () => dispatch({ type: 'CLEAR_ALL_PUBLISHER' })

  const value = useMemo(
    () => ({
      state,
      togglePublisherByName,
      selectAllPublisher,
      clearAllPublisher,
    }),
    [state]
  )

  return <SearchConditionContext.Provider value={value} {...props} />
}

// Context Object を子、孫コンポーネントから呼び出すための Custom Hook
export const useSearchCondition = () => {
  const context = useContext(SearchConditionContext)

  if (typeof context === 'undefined') {
    throw new Error('useSearchCondition must be within a SearchConditionProvider')
  }

  return context
}

// 検索条件の state と更新のための action を提供するためのコンポーネント
export const ManagedSearchConditionContext: React.FC = (props) => (
  <SearchConditionProvider>{props.children}</SearchConditionProvider>
)

export type ContainerProps = {
  // 省略
}

type Props = {
  onSubmit: (e: React.SubmitEvent<HTMLFormElement>) => void
  keyword: Keyword
  isOpen: boolean
  // 省略
}

const Component: React.FC<Props> = (props) => (
  <form onSubmit={props.onSubmit}>
    <Input keyword={props.keyword} />

    <Modal open={props.isOpen}>
      <Condition keyword={props.keyword} />
    </Modal>
  </form>
)

const Container: React.FC<ContainerProps> = (props) => {
  // 省略
  
  return (
    <Component
      onSubmit={handleSubmit}
      keyword={nextKeyword}
      isOpen={isOpen}
      {/* 省略  */}
    />
  )
}

const WithContext: React.FC<ContainerProps> = (props) => (
  <ManagedSearchConditionContext>
    <Container {...props} />
  </ManagedSearchConditionContext>
)

WithContext.displayName = 'SearchInput'

export default WithContext

import { Meta, Story } from '@storybook/react'

import SearchInput, { ContainerProps as Props } from './SearchInput'

export default {
  title: 'features/search/SearchInput',
} as Meta<Props>

const Template: Story<Props> = ({ ...args }) => <SearchInput {...args} />

export const Default = Template.bind({})
Default.args = { ... }