Не тригереться reducer (useReducer + Context) в Typescript

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Роблю невеличкий пет-проект, ніколи не тикав Typesctipt та все роблю імпровізуючи, в офіційних доках react прочитав топік про scaling Reducer and Context та намагаюся теж саме зробити у себе в проекті. Але чомусь не тригиреться reducer. Дуже багато спілкувався за чатоп гпт (який постійно казав, що начебто все написано правильно і проблем він не бачить) та на стек оверфлоу, ніхто не зміг допомогти.

Це мій файл поєднання context & reducer

const BookContext = createContext<{ books: Book[] }>({ books: initialBooks });
const BookDispatcherContext = createContext<Dispatch<Actions>>(() => {});


interface Props {
 children: ReactNode
}


type Actions =
 | { type: "added"; payload: Book }
 | { type: "deleted"; payload: number };


type State = {
 books: Book[];
};


export default function BooksProvider(props: Props) {
    
 const initialBooksState = { books: initialBooks };
 const [booksState, dispatcher] = useReducer(reducer, initialBooksState);
 const { children } = props;


    return (
  <BookContext.Provider value={{ books: booksState.books }}>
   <BookDispatcherContext.Provider value={dispatcher}>
    { children }
   </BookDispatcherContext.Provider>
  </BookContext.Provider>
 );
}


export function useBooks() {
  return useContext(BookContext).books;
}


export function useDispatcher() {
  return useContext(BookDispatcherContext);
}



function reducer(state: State, action: Actions) {
  switch (action.type) {
  case "added":
   return { ...state, books: [...state.books, action.payload] };
  case "deleted":
   return { ...state, books: state.books.filter(book => book.id !== action.payload) };
  default:
   return state;
  }
} 

// App.tsx
export default function App() {
 return (
  <div className="container">
   <ChakraProvider>
    <BooksProvider>
     <Home />
     <Finished />
    </BooksProvider>
   </ChakraProvider>
  </div>
 );
}

export default function BookCardChakra({ book }: { book: Book }) {
const dispatcher = useDispatcher();


const handleDeleteButton = (bookId: number) => {
console.log('clicked on id ' + book.id); // тут виводить коректний id книги
console.log(dispatcher); // постійно виводить () => {}
dispatcher({type: 'deleted', payload: bookId}); // нічого не відбувається
}


return (
  ...
 <Button variant="ghost" colorScheme="blue" onClick={() =>   handleDeleteButton(book.id)}> Delete</Button>
 </ButtonGroup>
 ...
 );
}