This file contains hidden or 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 { StoreProvider } from 'easy-peasy'; | |
function App() { | |
return ( | |
// 👇 secondly, surround your app with the provider to expose the store to your app | |
<StoreProvider store={store}> | |
<TodoList /> | |
</StoreProvider> | |
); | |
} |
This file contains hidden or 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 { useStore, useAction } from 'easy-peasy'; | |
function TodoList() { | |
// 👇 Access state | |
const todos = useStore(state => state.todos.items) | |
// 👇 Access actions | |
const add = useAction(dispatch => dispatch.todos.add) | |
return ( | |
<div> | |
{todos.map((todo, idx) => <div key={idx}>{todo.text}</div>)} |
This file contains hidden or 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 { createStore, effect } from 'easy-peasy'; // 👈 import the helper | |
const store = createStore({ | |
session: { | |
user: undefined, | |
// 👇 define your effectful action | |
login: effect(async (dispatch, payload, getState) => { | |
const user = await loginService(payload) | |
dispatch.session.loginSucceeded(user) | |
}), |
This file contains hidden or 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 hidden or 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 hidden or 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 { createStore } from 'easy-peasy'; | |
import { StoreModel } from './model'; | |
// 👇 | |
const store = createStore<StoreModel>({ | |
todos: { | |
items: ["Install easy-peasy", "Build app", "profit"] | |
}, | |
notification: { | |
msg: "" |
This file contains hidden or 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 hidden or 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 } from "easy-peasy"; | |
type TodosModel = { | |
items: string[]; | |
add: Action<TodosModel, string>; // 👈 | |
} | |
type NotificationModel = { | |
msg: string; | |
set: Action<NotificationModel, string>; // 👈 |
This file contains hidden or 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 hidden or 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: "", |