ctrlplusb

import { Action, Thunk } from 'easy-peasy';

type TodosModel = {
  items: string[];
  saved: Action<TodosModel, string>; 
  save: Thunk<TodosModel, string>; // 👈
}

ctrlplusb

import { useState } from "react";
import { useStore, useActions } from "./hooks"; // 👈

export default function Todos() {
  // 👇 pull out state from our store
  const items = useStore(state => state.todos.items);

  // 👇 pull out actions from our store
  const add = useActions(actions => actions.todos.add);

ctrlplusb

import { createTypedHooks } from "easy-peasy";
import { StoreModel } from "./model";

const { 
  useActions, 
  useStore, 
  useDispatch 
} = createTypedHooks<StoreModel>();
  
export { useActions, useDispatch, useStore };

ctrlplusb

store.dispatch.todos.add("Finish reading this article");

ctrlplusb

const store = createStore<StoreModel>({
  todos: {
    items: ["Install easy-peasy", "Build app", "profit"],
    // 👇
    add: (state, payload) => {
      state.items.push(payload);
    }
  },
  notification: {
    msg: "",

ctrlplusb

//         👇model to operate against
Action<TodosModel, string>;
//                   👆payload

ctrlplusb

store.getState().todos.items;
// ["Install easy-peasy", "Build app", "profit"]

ctrlplusb

type TodosModel = {
  items: string[];
}

type NotificationModel = {
  msg: string;
}

export type StoreModel = {
  todos: TodosModel;

ctrlplusb

npm install easy-peasy

ctrlplusb

import { select } from 'easy-peasy'; // 👈 import the helper

const store = createStore({
  shoppingBasket: {
    products: [{ name: 'Shoes', price: 123 }, { name: 'Hat', price: 75 }],
    // 👇 define your derived state
    totalPrice: select(state =>
      state.products.reduce((acc, cur) => acc + cur.price, 0)
    )
  }