title: TypeError: Cannot destructure property 'toDos' of 'Object(...)(...)' as it is undefined
body: <p>I'm a beginner learning ts for the first time. Thank you in advance for sharing your knowledge.
  I am making a to-do list. I used to react to complete it. But now I am using react and typescript together to complete the code.</p>
  <p>It seems to me that 'reducer' is not working properly. How can I operate this?
  <code>toDos</code>, <code>completed</code> Both have errors. My computer is not bringing these things at all.
  I'd appreciate it if you let me know. This is 'App.tsx' code with a surface error.</p>
  <pre><code>import React from &quot;react&quot;;
  import Add from &quot;./Add&quot;;
  import List from &quot;./List&quot;;
  import ToDo from &quot;./ToDo&quot;;
  import Title from &quot;./Title&quot;;
  import Progress from &quot;./Progress&quot;;
  import styled from &quot;styled-components&quot;;
  import { useTodosState } from '../context';
  
  function App() {
    const { toDos, completed } = useTodosState();
  
    return (
      &lt;Title&gt;
        &lt;Add /&gt;
        &lt;Progress /&gt;
        &lt;Lists&gt;
          &lt;List title={toDos.length !== 0 ? &quot;To Dos&quot; : &quot;&quot;}&gt;
            {toDos.map((toDo: any) =&gt; (
              &lt;ToDo key={toDo.id} id={toDo.id} text={toDo.text} isCompleted={false} /&gt;
            ))}
          &lt;/List&gt;
          &lt;List title={completed.length !== 0 ? &quot;Completed&quot; : &quot;&quot;}&gt;
            {completed.map((toDo: any) =&gt; (
              &lt;ToDo key={toDo.id} id={toDo.id} text
                {...toDo.text} isCompleted /&gt;
            ))}
          &lt;/List&gt;
        &lt;/Lists&gt;
      &lt;/Title&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>This code is the 'reducer.tsx' code that I thought there was a problem.</p>
  <pre><code>import { v4 as uuidv4 } from &quot;uuid&quot;;
  import { ADD, DEL, COMPLETE, UNCOMPLETE, EDIT } from &quot;./actions&quot;;
  
  export const initialState = {
    toDos: [],
    completed: [],
  };
  
  interface IReducer {
    state: any;
    action: any;
  }
  
  const Reducer = ({ state, action }: IReducer) =&gt; {
    switch (action) {
      case ADD:
        return {
          ...state,
          toDos: [...state.toDos, { text: action.payload, id: uuidv4() }],
        };
      case DEL:
        return {
          ...state,
          toDos: state.toDos.filter((toDo: { id: number; }) =&gt; toDo.id !== action.payload),
        };
      case COMPLETE:
        const target = state.toDos.find((toDo: { id: number; }) =&gt; toDo.id === action.payload);
        return {
          ...state,
          toDos: state.toDos.filter((toDo: { id: number; }) =&gt; toDo.id !== action.payload),
          completed: [...state.completed, { ...target }],
        };
      case UNCOMPLETE:
        const aTarget = state.completed.find(
          (toDo: { id: number; }) =&gt; toDo.id === action.payload
        );
        return {
          ...state,
          toDos: [...state.toDos, { ...aTarget }],
          completed: state.completed.filter(
            (complete: { id: number; }) =&gt; complete.id !== action.payload
          ),
        };
      case EDIT:
        const bTarget = state.toDos.find((toDo: { id: number; }) =&gt; toDo.id === action.id);
        const rest = state.toDos.filter((toDo: { id: number; }) =&gt; toDo.id !== action.id);
        return {
          ...state,
          toDos: rest.concat({ ...bTarget, text: action.payload }),
        };
      default:
        return;
    }
  };
  
  export default Reducer;
  </code></pre>
  <p>This code is 'context.tsx' code.</p>
  <pre><code>import React, { createContext, useReducer, useContext } from 'react';
  import Reducer, { initialState } from &quot;./reducer&quot;;
  
  export type Todo = {
    id: number;
    text: string;
    done: boolean;
  };
  
  export type TodosState = Todo[];
  
  const ToDosContext = createContext&lt;Array&lt;Todo&gt; | any&gt;(null);
  
  const ToDosProvider = ({ children }: { children: React.ReactNode }) =&gt; {
    const [state, dispatch] = useReducer(Reducer, initialState);
    return (
      &lt;ToDosContext.Provider value={{ state, dispatch }}&gt;
        {children}
      &lt;/ToDosContext.Provider&gt;
    );
  };
  
  export const useTodosDispatch = () =&gt; {
    const { dispatch } = useContext(ToDosContext);
    return dispatch;
  };
  
  export const useTodosState = () =&gt; {
    const { state } = useContext(ToDosContext);
    return state;
  };
  
  export default ToDosProvider;
  </code></pre>