Skip to content

Instantly share code, notes, and snippets.

👶
Welcoming my twin daughters into the world.

Sean Matheson ctrlplusb

👶
Welcoming my twin daughters into the world.
Block or report user

Report or block ctrlplusb

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View alt-action-form.ts
const store = createStore<StoreModel>({
todos: {
// ...
add: (state, payload) => {
return {
...state,
items: [
...state.items,
payload
]
View easy-peasy.js
import { StoreProvider, createStore, useStore, useActions } from 'easy-peasy';
// 👇 create your store, providing the model
const store = createStore({
todos: {
items: ['Install easy-peasy', 'Build app', 'Profit'],
// 👇 define actions directly on your model
add: (state, payload) => {
// do simple mutation to update state, and we make it an immutable update
state.items.push(payload)
View app.tsx
import React from "react";
import { render } from "react-dom";
import { StoreProvider } from "easy-peasy"; // 👈
import store from "./store";
render(
<StoreProvider store={store}>
<App />
</StoreProvider>,
document.querySelector("#root");
View todos-thunk.tsx
export default function Todos() {
const items = useStore(state => state.todos.items);
// 👇
const save = useActions(actions => actions.todos.save);
const [newTodo, setNewTodo] = useState("");
return (
<div>
View thunk-model.ts
import { thunk } from "easy-peasy"; // 👈
const store = createStore<StoreModel>({
todos: {
items: ["Install easy-peasy", "Build app", "profit"],
// 👇renamed
saved: (state, payload) => {
state.items.push(payload);
},
// 👇our thunk
View thunk.ts
import { Action, Thunk } from 'easy-peasy';
type TodosModel = {
items: string[];
saved: Action<TodosModel, string>;
save: Thunk<TodosModel, string>; // 👈
}
View todos.tsx
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);
View hooks.ts
import { createTypedHooks } from "easy-peasy";
import { StoreModel } from "./model";
const {
useActions,
useStore,
useDispatch
} = createTypedHooks<StoreModel>();
export { useActions, useDispatch, useStore };
View dispatch.ts
store.dispatch.todos.add("Finish reading this article");
View actions-imp.ts
const store = createStore<StoreModel>({
todos: {
items: ["Install easy-peasy", "Build app", "profit"],
// 👇
add: (state, payload) => {
state.items.push(payload);
}
},
notification: {
msg: "",
You can’t perform that action at this time.