This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm install easy-peasy |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type TodosModel = { | |
items: string[]; | |
} | |
type NotificationModel = { | |
msg: string; | |
} | |
export type StoreModel = { | |
todos: TodosModel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
store.getState().todos.items; | |
// ["Install easy-peasy", "Build app", "profit"] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 👇model to operate against | |
Action<TodosModel, string>; | |
// 👆payload |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const store = createStore<StoreModel>({ | |
todos: { | |
items: ["Install easy-peasy", "Build app", "profit"], | |
// 👇 | |
add: (state, payload) => { | |
state.items.push(payload); | |
} | |
}, | |
notification: { | |
msg: "", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
store.dispatch.todos.add("Finish reading this article"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createTypedHooks } from "easy-peasy"; | |
import { StoreModel } from "./model"; | |
const { | |
useActions, | |
useStore, | |
useDispatch | |
} = createTypedHooks<StoreModel>(); | |
export { useActions, useDispatch, useStore }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Action, Thunk } from 'easy-peasy'; | |
type TodosModel = { | |
items: string[]; | |
saved: Action<TodosModel, string>; | |
save: Thunk<TodosModel, string>; // 👈 | |
} |