usereducer+usecontext.js

import React from 'react'

const Store = React.createContext()
const useStore = () => React.useContext(Store)

const reducer = (state, action) => {
  switch(action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] }

    default:
      return state
  }
}

const initialValue = {
  todos: [],
}

const App = () => {
  const [value, dispatch] = React.useReducer(reducer, initialValue)
  
  return (
    <Store.Provider value={{ ...value, dispatch }}>
      <TodoList />
    </Store.Provider>
  )
}

const TodoList = () => {
  const { todos, dispatch } = useStore()
  
  const add = (text) => {
    dispatch({
      action: 'ADD_TODO',
      payload: text,
    })
  }
  
  return (
    <div>
      {todos.map((todo, idx) => <div key={idx}>{todo}</div>)}
      <AddTodo onAdd={add} />
    </div>
  )
}