;
7 | }
8 |
9 | interface Model {
10 | todos: TodosModel;
11 | }
12 |
13 | const todos: TodosModel = {
14 | items: [],
15 | add: action(
16 | (state, payload) => {
17 | state.items.push(payload);
18 | },
19 | { immer: true },
20 | ),
21 | clear: action((state) => {
22 | state.items = [];
23 | }),
24 | };
25 |
26 | const model: Model = {
27 | todos,
28 | };
29 |
30 | const store = createStore(model);
31 |
32 | store.dispatch.todos.add('foo');
33 | // @ts-expect-error
34 | store.dispatch.todos.add(1);
35 | // @ts-expect-error
36 | store.dispatch.todos.add();
37 |
38 | store.dispatch.todos.clear();
39 |
--------------------------------------------------------------------------------
/examples/react-native-todo/android/app/src/release/java/com/reactnativetodo/ReactNativeFlipper.java:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the LICENSE file in the root
5 | * directory of this source tree.
6 | */
7 | package com.reactnativetodo;
8 |
9 | import android.content.Context;
10 | import com.facebook.react.ReactInstanceManager;
11 |
12 | /**
13 | * Class responsible of loading Flipper inside your React Native application. This is the release
14 | * flavor of it so it's empty as we don't want to load Flipper.
15 | */
16 | public class ReactNativeFlipper {
17 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
18 | // Do nothing as we don't want to initialize Flipper on Release.
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/website/docs/docs/typescript-api/state.md:
--------------------------------------------------------------------------------
1 | # State
2 |
3 | Allows you to get a type that represents the state of a model.
4 |
5 | ```typescript
6 | State<
7 | Model extends object = {}
8 | >
9 | ```
10 |
11 | ## Example
12 |
13 | ```typescript
14 | import { State } from 'easy-peasy';
15 | import { StoreModel } from './index';
16 |
17 | type StoreState = State;
18 | ```
19 |
20 | Typically this would only be useful when using the `useStoreState` hook.
21 |
22 | ```typescript
23 | import { useStoreState, State } from 'easy-peasy';
24 | import { StoreModel } from './store';
25 |
26 | function MyComponent() {
27 | const todos = useStoreState(
28 | (state: State) => state.todos.items
29 | );
30 | }
31 | ```
32 |
33 | That being said, we recommend you use the [createTypedHooks](/docs/typescript-api/create-typed-hooks.html) API instead.
--------------------------------------------------------------------------------
/tests/typescript/create-store.ts:
--------------------------------------------------------------------------------
1 | import { action, createStore, EasyPeasyConfig, Action } from 'easy-peasy';
2 |
3 | interface StoreModel {
4 | foo: string;
5 | update: Action;
6 | }
7 |
8 | const model: StoreModel = {
9 | foo: 'bar',
10 | update: action((state, payload) => {
11 | state.foo = payload;
12 | }),
13 | };
14 |
15 | const storeWithoutConfig = createStore(model);
16 |
17 | storeWithoutConfig.getMockedActions().length;
18 | storeWithoutConfig.clearMockedActions();
19 | storeWithoutConfig.getState().foo;
20 | storeWithoutConfig.getActions().update('bar');
21 |
22 | const config: EasyPeasyConfig = {
23 | mockActions: true,
24 | };
25 | const storeWithConfig = createStore(model, config);
26 |
27 | storeWithConfig.getMockedActions().length;
28 | storeWithoutConfig.clearMockedActions();
29 | storeWithConfig.getActions().update('bar');
30 |
--------------------------------------------------------------------------------
/src/migrations.js:
--------------------------------------------------------------------------------
1 | import { produce, setAutoFreeze } from 'immer';
2 |
3 | export const migrate = (
4 | data,
5 | migrations,
6 | ) => {
7 | setAutoFreeze(false);
8 |
9 | let version = data._migrationVersion ?? 0;
10 | const toVersion = migrations.migrationVersion
11 |
12 | if (typeof version !== "number" || typeof toVersion !== 'number') {
13 | throw new Error('No migration version found');
14 | }
15 |
16 | while (version < toVersion) {
17 | const nextVersion = version + 1;
18 | const migrator = migrations[nextVersion];
19 |
20 | if (!migrator) {
21 | throw new Error(`No migrator found for \`migrationVersion\` ${nextVersion}`);
22 | }
23 |
24 | data = produce(data, migrator);
25 | data._migrationVersion = nextVersion;
26 | version = data._migrationVersion;
27 | }
28 |
29 | setAutoFreeze(true);
30 | return data;
31 | }
32 |
--------------------------------------------------------------------------------
/examples/react-native-todo/ios/ReactNativeTodoTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | $(PRODUCT_BUNDLE_IDENTIFIER)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | BNDL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 |
24 |
25 |
--------------------------------------------------------------------------------
/examples/nextjs-todo/README.md:
--------------------------------------------------------------------------------
1 | # Simple todo example with Next.js
2 |
3 | This is a [Next.js](https://nextjs.org/) example bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
4 |
5 | This is a clone of [`simple-todo`](../simple-todo/), modified to be compatible with Next.js.
6 |
7 | ## Getting Started
8 |
9 | First, run the development server:
10 |
11 | ```bash
12 | yarn dev
13 | ```
14 |
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 |
17 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
18 |
19 | The `easy-peasy` store & models are located in the `store` folder. All pages (in this example, just `index.tsx`)
20 | are setup to use `easy-peasy` via the `pages/_app.tsx`, which wraps all page components with the ``.
--------------------------------------------------------------------------------
/website/docs/docs/typescript-api/actions.md:
--------------------------------------------------------------------------------
1 | # Actions
2 |
3 | Allows you to get a type that represents the actions of a model.
4 |
5 | ```typescript
6 | Actions<
7 | Model extends Object = {}
8 | >
9 | ```
10 |
11 | ## Example
12 |
13 | ```typescript
14 | import { Actions } from 'easy-peasy';
15 | import { StoreModel } from './index';
16 |
17 | type StoreActions = Actions;
18 | ```
19 |
20 | Typically this would only be useful when using the `useStoreActions` hook.
21 |
22 | ```typescript
23 | import { useStoreActions, Actions } from 'easy-peasy';
24 | import { StoreModel } from './store';
25 |
26 | function MyComponent() {
27 | const addTodo = useStoreActions(
28 | (actions: Actions) => actions.todos.addTodo
29 | );
30 | }
31 | ```
32 |
33 | That being said, we recommend you use the [createTypedHooks](/docs/typescript-api/create-typed-hooks.html) API instead.
--------------------------------------------------------------------------------
/website/docs/docs/typescript-api/reducer.md:
--------------------------------------------------------------------------------
1 | # Reducer
2 |
3 | Defines a [reducer](/docs/api/reducer.html) against your model.
4 |
5 | ## API
6 |
7 | ```typescript
8 | Reducer<
9 | State = any,
10 | Action extends ReduxAction = ReduxAction
11 | >
12 | ```
13 |
14 | - `State`
15 |
16 | The type for the state that will be managed by the [reducer](/docs/api/reducer.html).
17 |
18 | - `Action`
19 |
20 | The type of the actions that may be received by the reducer.
21 |
22 |
23 | ## Example
24 |
25 | ```typescript
26 | import { Reducer, reducer } from 'easy-peasy';
27 |
28 | interface StoreModel {
29 | todos: Reducer;
30 | }
31 |
32 | const storeModel: StoreModel = {
33 | todos: reducer((state = [], action) => {
34 | switch (action.type) {
35 | case 'ADD_TODO': return [...state, action.payload];
36 | default: return state;
37 | }
38 | })
39 | }
40 | ```
--------------------------------------------------------------------------------
/src/create-transform.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file has been copied from redux-persist.
3 | * The intention being to support as much of the redux-persist API as possible.
4 | */
5 |
6 | export function createTransform(inbound, outbound, config = {}) {
7 | const whitelist = config.whitelist || null;
8 | const blacklist = config.blacklist || null;
9 |
10 | function whitelistBlacklistCheck(key) {
11 | if (whitelist && whitelist.indexOf(key) === -1) return true;
12 | if (blacklist && blacklist.indexOf(key) !== -1) return true;
13 | return false;
14 | }
15 |
16 | return {
17 | in: (data, key, fullState) =>
18 | !whitelistBlacklistCheck(key) && inbound
19 | ? inbound(data, key, fullState)
20 | : data,
21 | out: (data, key, fullState) =>
22 | !whitelistBlacklistCheck(key) && outbound
23 | ? outbound(data, key, fullState)
24 | : data,
25 | };
26 | }
27 |
--------------------------------------------------------------------------------
/examples/reduxtagram/src/pages/root.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BrowserRouter, Link, Navigate, Route, Routes } from 'react-router-dom';
3 | import { StoreProvider } from 'easy-peasy';
4 | import store from '@/store';
5 | import PhotoGrid from '@/pages/photo-grid';
6 | import Single from '@/pages/single';
7 |
8 | export default function Root() {
9 | return (
10 | <>
11 |
12 |
13 |
14 |
16 |
17 |
21 |
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/examples/simple-todo/README.md:
--------------------------------------------------------------------------------
1 | # Simple todo example ([View codesandbox](https://codesandbox.io/s/fnidh1))
2 |
3 | The simplest example of `react` and `easy-peasy`.
4 |
5 | 
6 |
7 | This is a `Vite + React + Typescript + Eslint + Prettier` example based on [this template](https://github.com/TheSwordBreaker/vite-reactts-eslint-prettier).
8 |
9 | ## Getting Started
10 |
11 | First, run the development server:
12 |
13 | ```bash
14 | yarn dev
15 | ```
16 |
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 |
19 | You can start editing the page by modifying `src/components/App.tsx`. The page auto-updates as you edit the file.
20 |
21 | The `easy-peasy` store & models are located in the `src/store` folder.
22 | The `main.tsx` file wraps the ``, so all child components can access the
23 | hooks exposed from the `store/index.ts`.
24 |
--------------------------------------------------------------------------------
/examples/react-native-todo/README.md:
--------------------------------------------------------------------------------
1 | React Native Todo app based on React Native CLI quick start
2 |
3 | Store model copied (and modified) from [simple-todo](../simple-todo)
4 |
5 | 
6 |
7 | ## Getting Started
8 |
9 | > Ensure that you have a working [development environment](https://reactnative.dev/docs/environment-setup?guide=native).
10 |
11 | First, install the dependencies:
12 |
13 | ```bash
14 | yarn
15 | ```
16 |
17 | iOS
18 |
19 | ```bash
20 | yarn ios
21 | ```
22 |
23 | Android
24 |
25 | ```bash
26 | yarn android
27 | ```
28 |
29 | If metro does not start automatically, run:
30 |
31 | ```bash
32 | npx react-native start
33 | ```
34 |
35 | You can start editing the screen by modifying `src/components/TodoList.tsx`.
36 |
37 | The `easy-peasy` store & models are located under `src/store`.
38 | The `App.tsx` file wraps the ``.
39 |
40 | Happy coding! 🍏
41 |
--------------------------------------------------------------------------------
/examples/reduxtagram/test/posts-model.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from 'vitest';
2 | import { createStore } from 'easy-peasy';
3 | import { Post, postsModel } from '@/model';
4 |
5 | describe('Posts', () => {
6 | it('should be initialized', () => {
7 | // arrange
8 | const store = createStore(postsModel, { initialState: { posts: [] } });
9 |
10 | // assert
11 | expect(store.getState().posts).toEqual([]);
12 | });
13 |
14 | it('should like post', () => {
15 | // arrange
16 | const post: Post = {
17 | caption: 'Lunch #hamont',
18 | likes: 8,
19 | id: 'BAcyDyQwcXX',
20 | src: 'https://picsum.photos/400/400/?image=64',
21 | };
22 | const store = createStore(postsModel, {
23 | initialState: { posts: [post] },
24 | });
25 |
26 | // act
27 | store.getActions().likePost('BAcyDyQwcXX');
28 |
29 | // assert
30 | expect(store.getState().posts).toEqual([{ ...post, likes: 9 }]);
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/website/docs/docs/typescript-api/create-typed-hooks.md:
--------------------------------------------------------------------------------
1 | # createTypedHooks
2 |
3 | Creates typed versions of the hooks so that you don't need to apply typing information against them when using them within your components.
4 |
5 | ## Example
6 |
7 | ```typescript
8 | // hooks.js
9 | import { createTypedHooks } from 'easy-peasy';
10 | import { StoreModel } from './model';
11 |
12 | const { useStoreActions, useStoreState, useStoreDispatch, useStore } = createTypedHooks();
13 |
14 | export {
15 | useStoreActions,
16 | useStoreState,
17 | useStoreDispatch,
18 | useStore
19 | }
20 | ```
21 |
22 | And then use them within your components:
23 |
24 | ```typescript
25 | import { useStoreState } from './hooks'; // 👈 import the typed hooks
26 |
27 | export default MyComponent() {
28 | // This will be typed
29 | // 👇
30 | const message = useStoreState(state => state.message);
31 | return {message}
;
32 | }
33 | ```
34 |
--------------------------------------------------------------------------------
/examples/kanban/src/components/TaskList/TaskList.tsx:
--------------------------------------------------------------------------------
1 | import { useStoreState } from '../../store';
2 | import { StoreModel } from '../../store/model';
3 | import AddTask from './AddTask';
4 | import TaskView from './TaskView';
5 |
6 | const TaskList: React.FC<{ list: keyof StoreModel }> = ({ list }) => {
7 | const state = useStoreState((state) => state[list]);
8 |
9 | return (
10 |
11 |
12 | {state.name}
13 |
14 |
15 |
16 | {state.tasks.map((task) => (
17 |
20 |
23 |
24 |
;
31 | }
32 |
33 | const todosModel: TodosModel = {
34 | todos: [],
35 | addTodo: action((state, payload) => {
36 | state.todos.push(payload);
37 | })
38 | }
39 | ```
--------------------------------------------------------------------------------
/website/docs/docs/recipes/react-native-devtools.md:
--------------------------------------------------------------------------------
1 | # React Native Dev Tools
2 |
3 | React Native, hybrid, desktop and server side Redux apps can use Redux Dev Tools using the [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) library.
4 |
5 | To use this library, you will need to pass the DevTools compose helper as part of the [config object](/docs/api/store-config.html) to `createStore`
6 |
7 | ```javascript
8 | import { createStore } from 'easy-peasy';
9 | import { composeWithDevTools } from 'remote-redux-devtools';
10 | import model from './model';
11 |
12 | const store = createStore(model, {
13 | compose: composeWithDevTools({ realtime: true, trace: true })
14 | });
15 |
16 | export default store;
17 | ```
18 |
19 | In the example above you will see that we are extending our store, providing an override to the default `compose` function used for our Redux store enhancers. We are utilising the compose exported by the [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools) library.
20 |
--------------------------------------------------------------------------------
/website/docs/docs/introduction/README.md:
--------------------------------------------------------------------------------
1 | # Introduction
2 |
3 | Easy Peasy is an abstraction of Redux. It provides a reimagined API focussing on
4 | developer experience , allowing you to quickly
5 | and easily manage your state, whilst leveraging the strong
6 | architectural guarantees and providing integration with the
7 | extensive eco-system that Redux has to offer.
8 |
9 | Batteries are included - no configuration is required to
10 | support a robust and scalable state management
11 | solution that includes advanced features such as derived state, API calls,
12 | developer tools , and fully typed experience via
13 | TypeScript .
14 |
15 |
16 |
17 |
18 |
19 |
20 | Quick Start
21 |
22 |
--------------------------------------------------------------------------------
/examples/kanban/src/components/TaskList/AddTask.test.tsx:
--------------------------------------------------------------------------------
1 | import { createStore } from 'easy-peasy';
2 | import { describe, it, expect } from 'vitest';
3 |
4 | import model, { StoreModel } from '../../store/model';
5 | import { setup } from '../../utils/test-utils';
6 | import AddTask from './AddTask';
7 |
8 | const listKeys: Array = ['todo', 'doing', 'done'];
9 |
10 | describe.each(listKeys)(' {
8 | commitSomething: Thunk<
9 | IModelAStoreModel,
10 | void,
11 | Injections,
12 | IModelAStoreModel
13 | >;
14 | }
15 |
16 | // IModelAStoreModel is generic, and requires the root store as input
17 | type IModelAStoreModel = IModelA &
18 | ISomeOtherModel & {
19 | onSomethingLoaded: Thunk;
20 | };
21 |
22 | // IModelBStoreModel is not generic, and is based on IModelAStoreModel, but it does not care about the generic type
23 | // of IModelAStoreModel (thus it is just passing`any` to`IModelAStoreModel`)
24 | interface IModelBStoreModel extends IModelAStoreModel {}
25 |
26 | // IStoreModel should be allowed to extend both IModelAStoreModel & IModelBStoreModel
27 | interface IStoreModel
28 | extends IModelAStoreModel,
29 | IModelBStoreModel {}
30 |
--------------------------------------------------------------------------------
/examples/kanban/src/components/TaskList/TaskList.test.tsx:
--------------------------------------------------------------------------------
1 | import { createStore } from 'easy-peasy';
2 | import { describe, it, expect } from 'vitest';
3 |
4 | import model, { StoreModel } from '../../store/model';
5 | import { setup } from '../../utils/test-utils';
6 | import TaskList from './TaskList';
7 |
8 | const listKeys: Array = ['todo', 'doing', 'done'];
9 |
10 | describe.each(listKeys)('();
30 | ```
31 |
32 | Check out the [GitHub repository](https://github.com/easypeasy-community/decorators) for more information.
33 |
--------------------------------------------------------------------------------
/examples/reduxtagram/src/pages/single.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useParams } from 'react-router';
3 | import AddCommentForm from '@/components/add-comment-form';
4 | import Photo from '@/components/photo';
5 | import PostComment from '@/components/post-comment';
6 | import { useStoreState } from '@/hooks';
7 |
8 | export default function Single() {
9 | const { postId } = useParams<{ postId: string }>();
10 | const post = useStoreState((state) => state.postsModel.posts.find((item) => item.id === postId));
11 | const postComments = useStoreState((state) => (post ? state.commentsModel.byPostId(post.id) : []));
12 |
13 | if (post) {
14 | return (
15 |
16 |
17 |
18 | {postComments.map((comment) => (
19 |
20 | ))}
21 |
22 |
23 |
- {
9 | items: Array
- ;
10 | count: Computed
, number>;
11 | // This is not supported. It currently breaks the Easy Peasy typings,
12 | // resulting in the `dataModel` helper below not presenting the correct type
13 | // information to you.
14 | // 👇
15 | sortBy: keyof Item | "none";
16 | }
17 |
18 | export const dataModel = - (items: Item[]): DataModel
- => ({
19 | items: items,
20 | // This typing information would be invalid
21 | // 👇
22 | count: computed(state => state.items.length),
23 | sortBy: "none"
24 | });
25 | ```
--------------------------------------------------------------------------------
/examples/nextjs-todo/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/examples/react-native-todo/android/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
19 |
20 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/website/docs/docs/api/use-store-actions.md:
--------------------------------------------------------------------------------
1 | # useStoreActions
2 |
3 | A [hook](https://reactjs.org/docs/hooks-intro.html) granting your components access to the [store's](/docs/api/store.html) [actions](/docs/api/action.html).
4 |
5 | ```javascript
6 | const addTodo = useStoreActions(actions => actions.todos.add);
7 | ```
8 |
9 | ## Arguments
10 |
11 | - `mapActions` (Function, required)
12 |
13 | The function that is used to resolve the [action](/docs/api/action.html) that your component requires. It receives the following arguments:
14 |
15 | - `actions` (Object)
16 |
17 | The [actions](/docs/api/action.html) of your store.
18 |
19 | ## Example
20 |
21 | ```javascript
22 | import { useState } from 'react';
23 | import { useStoreActions } from 'easy-peasy';
24 |
25 | const AddTodo = () => {
26 | const [text, setText] = useState('');
27 | const addTodo = useStoreActions(actions => actions.todos.add);
28 | return (
29 |
30 | addTodo(text)}>Add
32 |
33 | );
34 | };
35 | ```
36 |
--------------------------------------------------------------------------------
/examples/react-native-todo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ReactNativeTodo",
3 | "version": "0.0.1",
4 | "private": true,
5 | "scripts": {
6 | "android": "react-native run-android",
7 | "ios": "react-native run-ios",
8 | "lint": "eslint .",
9 | "start": "react-native start",
10 | "test": "jest"
11 | },
12 | "dependencies": {
13 | "easy-peasy": "^6.0.0",
14 | "react": "18.2.0",
15 | "react-native": "0.71.4"
16 | },
17 | "devDependencies": {
18 | "@babel/core": "^7.20.0",
19 | "@babel/preset-env": "^7.20.0",
20 | "@babel/runtime": "^7.20.0",
21 | "@react-native-community/eslint-config": "^3.2.0",
22 | "@tsconfig/react-native": "^2.0.2",
23 | "@types/jest": "^29.2.1",
24 | "@types/react": "^18.0.24",
25 | "@types/react-test-renderer": "^18.0.0",
26 | "babel-jest": "^29.2.1",
27 | "eslint": "^8.19.0",
28 | "jest": "^29.2.1",
29 | "metro-react-native-babel-preset": "0.73.8",
30 | "prettier": "^2.4.1",
31 | "react-test-renderer": "18.2.0",
32 | "typescript": "4.8.4"
33 | },
34 | "jest": {
35 | "preset": "react-native"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/website/docs/docs/known-issues/typescript-optional-computed-properties.md:
--------------------------------------------------------------------------------
1 | # Marking computed properties as optional on your TypeScript model
2 |
3 | Unfortunately, due to the way our typing system maps your model, you cannot
4 | declare a computed property as being optional via the `?` property postfix.
5 |
6 | For example:
7 |
8 | ```typescript
9 | interface StoreModel {
10 | products: Product[];
11 | totalPrice?: Computed;
12 | // 👆
13 | // Note the optional definition
14 | }
15 |
16 | const storeModel: StoreModel = {
17 | products: [];
18 | // This will result in a TypeScript error 😢
19 | totalPrice: computed(
20 | state => state.products.length > 0
21 | ? calcPrice(state.products)
22 | : undefined
23 | )
24 | }
25 | ```
26 |
27 | Luckily there is a workaround; simply adjust the definition of your computed
28 | property to indicate that the result could be undefined.
29 |
30 | ```diff
31 | interface StoreModel {
32 | products: Product[];
33 | - totalPrice?: Computed;
34 | + totalPrice: Computed;
35 | }
36 | ```
37 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2018-present Sean Matheson
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/examples/reduxtagram/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "env": {
4 | "browser": true,
5 | "es2021": true,
6 | "node": true
7 | },
8 | "overrides": [
9 | {
10 | "files": [
11 | "*.js"
12 | ],
13 | "extends": [
14 | "eslint:recommended",
15 | "plugin:prettier/recommended"
16 | ]
17 | },
18 | {
19 | "files": [
20 | "*.ts",
21 | "*.tsx"
22 | ],
23 | "settings": {
24 | "react": {
25 | "version": "detect"
26 | }
27 | },
28 | "parser": "@typescript-eslint/parser",
29 | "parserOptions": {
30 | "ecmaFeatures": {
31 | "jsx": true
32 | },
33 | "ecmaVersion": "latest",
34 | "sourceType": "module"
35 | },
36 | "extends": [
37 | "eslint:recommended",
38 | "plugin:@typescript-eslint/recommended",
39 | "plugin:react/recommended",
40 | "plugin:prettier/recommended"
41 | ],
42 | "rules": {
43 | "react/react-in-jsx-scope": "off",
44 | "@typescript-eslint/no-non-null-assertion": "off"
45 | }
46 | }
47 | ]
48 | }
49 |
--------------------------------------------------------------------------------
/examples/react-native-todo/ios/ReactNativeTodo/Images.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "idiom" : "iphone",
5 | "scale" : "2x",
6 | "size" : "20x20"
7 | },
8 | {
9 | "idiom" : "iphone",
10 | "scale" : "3x",
11 | "size" : "20x20"
12 | },
13 | {
14 | "idiom" : "iphone",
15 | "scale" : "2x",
16 | "size" : "29x29"
17 | },
18 | {
19 | "idiom" : "iphone",
20 | "scale" : "3x",
21 | "size" : "29x29"
22 | },
23 | {
24 | "idiom" : "iphone",
25 | "scale" : "2x",
26 | "size" : "40x40"
27 | },
28 | {
29 | "idiom" : "iphone",
30 | "scale" : "3x",
31 | "size" : "40x40"
32 | },
33 | {
34 | "idiom" : "iphone",
35 | "scale" : "2x",
36 | "size" : "60x60"
37 | },
38 | {
39 | "idiom" : "iphone",
40 | "scale" : "3x",
41 | "size" : "60x60"
42 | },
43 | {
44 | "idiom" : "ios-marketing",
45 | "scale" : "1x",
46 | "size" : "1024x1024"
47 | }
48 | ],
49 | "info" : {
50 | "author" : "xcode",
51 | "version" : 1
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/tests/typescript/issue427.ts:
--------------------------------------------------------------------------------
1 | import { Computed, computed } from 'easy-peasy';
2 |
3 | interface AppModel {
4 | currentRoleId?: number;
5 | }
6 |
7 | interface Role {
8 | id: number;
9 | name: string;
10 | description: string;
11 | }
12 |
13 | interface RolesModel {
14 | rolesMap: { [roleId: string]: Role };
15 | currentRole: Computed;
16 | currentRoleName: Computed;
17 | }
18 |
19 | interface StoreModel {
20 | app: AppModel;
21 | roles: RolesModel;
22 | }
23 |
24 | const storeModel: StoreModel = {
25 | app: {
26 | currentRoleId: 1,
27 | },
28 | roles: {
29 | rolesMap: {
30 | '1': { id: 1, name: 'Role example', description: 'Role description' },
31 | },
32 | currentRole: computed(
33 | [
34 | (_, storeState) => storeState.app.currentRoleId,
35 | (state) => state.rolesMap,
36 | ],
37 | (roleId, rolesMap) => (roleId != null ? rolesMap[roleId] : undefined),
38 | ),
39 | currentRoleName: computed(
40 | [(state) => state.currentRole],
41 | (role) => role && role.name,
42 | ),
43 | },
44 | };
45 |
--------------------------------------------------------------------------------
/tests/typescript/use-local-store.tsx:
--------------------------------------------------------------------------------
1 | import { useLocalStore, Action, action } from 'easy-peasy';
2 |
3 | interface StoreModel {
4 | count: number;
5 | inc: Action;
6 | }
7 |
8 | const [state, actions, store] = useLocalStore(() => ({
9 | count: 0,
10 | inc: action((state) => {
11 | state.count += 1;
12 | }),
13 | }));
14 |
15 | state.count + 1;
16 | actions.inc();
17 | store.getState().count + 1;
18 |
19 | useLocalStore(
20 | () => ({
21 | count: 0,
22 | inc: action((state) => {
23 | state.count += 1;
24 | }),
25 | }),
26 | ['foo', 123],
27 | );
28 |
29 | useLocalStore(
30 | (prevState) => {
31 | if (prevState != null) {
32 | prevState.count + 1;
33 | }
34 | return {
35 | count: 0,
36 | inc: action((state) => {
37 | state.count += 1;
38 | }),
39 | };
40 | },
41 | ['foo', 123],
42 | (prevState, prevConfig) => {
43 | if (prevState != null) {
44 | prevState.count + 1;
45 | }
46 | if (prevConfig != null) {
47 | `${prevConfig.name}foo`;
48 | }
49 | return {
50 | name: 'MyLocalStore',
51 | };
52 | },
53 | );
54 |
--------------------------------------------------------------------------------
/examples/reduxtagram/src/components/add-comment-form.tsx:
--------------------------------------------------------------------------------
1 | import React, { FormEvent, useState } from 'react';
2 | import { useStoreActions } from '@/hooks';
3 |
4 | interface Props {
5 | postId: string;
6 | }
7 |
8 | export default function AddCommentForm({ postId }: Props) {
9 | const addComment = useStoreActions((actions) => actions.commentsModel.addComment);
10 | const [author, setAuthor] = useState('');
11 | const [comment, setComment] = useState('');
12 |
13 | const onSubmit = (e: FormEvent) => {
14 | e.preventDefault();
15 |
16 | if (author && comment) {
17 | addComment({ postId, user: author, text: comment });
18 | setAuthor('');
19 | setComment('');
20 | }
21 | };
22 |
23 | return (
24 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/website/docs/docs/api/debug.md:
--------------------------------------------------------------------------------
1 | # debug
2 |
3 | This helper is useful in the context of [actions](/docs/api/action.html).
4 |
5 | [Actions](/docs/api/action.html) use the [immer](https://github.com/mweststrate/immer) library under the hood in order to convert mutative updates into immutable ones. Therefore if you try to `console.log` your state within an [action](/doc/api/action.html) you will see a `Proxy` object or a `null` is printed.
6 |
7 | Use this helper in order to get the actual value of the `state` within your [action](/docs/api/action.html).
8 |
9 | _Before:_
10 |
11 | ```javascript
12 | const model = {
13 | increment: action((state, payload) => {
14 | state.count += 1;
15 | console.log(state); // 👈 prints a Proxy object or a null
16 | })
17 | }
18 | ```
19 |
20 | _After:_
21 |
22 | ```javascript
23 | import { debug } from 'easy-peasy';
24 |
25 | const model = {
26 | increment: action((state, payload) => {
27 | state.count += 1;
28 | console.log(debug(state)); // 👈 prints the "native" state representation
29 | })
30 | }
31 | ```
32 |
33 | > ***Note:*** *If you have set the `disableImmer` configuration value on the store you will not need to use this helper.*
--------------------------------------------------------------------------------
/website/docs/docs/recipes/connecting-to-reactotron.md:
--------------------------------------------------------------------------------
1 | # Connecting to Reactotron
2 |
3 | [Reactotron](https://github.com/infinitered/reactotron) is a desktop app for
4 | inspecting your React JS and React Native projects.
5 |
6 | It is possible to configure Easy Peasy so to be connected to your Reactotron
7 | instance.
8 |
9 | Firstly, ensure you have a Reactotron configuration similar to.
10 |
11 | ```javascript
12 | // reactotron.js
13 |
14 | import Reactotron from 'reactotron-react-native';
15 | import { reactotronRedux } from 'reactotron-redux';
16 |
17 | const reactron = Reactotron.configure()
18 | .useReactNative()
19 | .use(reactotronRedux())
20 | .connect();
21 |
22 | export default reactron;
23 | ```
24 |
25 | Then update the manner in which you create your Easy Peasy store.
26 |
27 | ```javascript
28 | // create-store.js
29 |
30 | import { createStore } from 'easy-peasy';
31 | import model from './model';
32 |
33 | let storeEnhancers = [];
34 |
35 | if (__DEV__) {
36 | const reactotron = require('./reactotron').default;
37 | storeEnhancers = [...storeEnhancers, reactotron.createEnhancer()];
38 | }
39 |
40 | const store = createStore(model, {
41 | enhancers: [...storeEnhancers],
42 | });
43 |
44 | export default store;
45 | ```
46 |
--------------------------------------------------------------------------------
/website/docs/docs/typescript-api/action-on.md:
--------------------------------------------------------------------------------
1 | # ActionOn
2 |
3 | Defines an [actionOn](/docs/api/action-on.html) listener against your model.
4 |
5 | ## API
6 |
7 | ```typescript
8 | ActionOn<
9 | Model extends object = {},
10 | StoreModel extends object = {}
11 | >
12 | ```
13 |
14 | - `Model`
15 |
16 | The model against which the [actionOn](/docs/api/action-on.html) is being defined. You need to provide this so that the state that will be provided to your [actionOn](/docs/api/action-on.html) is correctly typed.
17 |
18 | - `StoreModel`
19 |
20 | If you plan on targeting an action from another part of your store state then you will need to provide your store model so that the provided store actions are correctly typed.
21 |
22 |
23 | ## Example
24 |
25 | ```typescript
26 | import { ActionOn, actionOn } from 'easy-peasy';
27 | import { StoreModel } from '../index';
28 |
29 | interface AuditModel {
30 | logs: string[];
31 | onTodoAdded: ActionOn;
32 | }
33 |
34 | const auditModel: AuditModel = {
35 | logs: [],
36 | onTodoAdded: actionOn(
37 | (actions, storeActions) => storeActions.todos.addTodo,
38 | (state, payload) => {
39 | state.logs.push(`Added todo: ${payload}`);
40 | }
41 | )
42 | }
43 | ```
--------------------------------------------------------------------------------
/tests/typescript/issue246.ts:
--------------------------------------------------------------------------------
1 | import { Action, action, createStore } from 'easy-peasy';
2 |
3 | interface Item {
4 | id: number;
5 | name: string;
6 | }
7 |
8 | interface BeholderModel extends BaseListModel {
9 | // Extra stuff for interface
10 | beholderName: string;
11 | }
12 |
13 | interface CreatorModel extends BaseListModel {
14 | // Extra stuff for interface
15 | creatorName: string;
16 | }
17 |
18 | // error at in setList
19 | interface BaseListModel {
20 | list: Item[];
21 | setList: Action;
22 | }
23 |
24 | interface StoreModel {
25 | beholder: BeholderModel;
26 | creator: CreatorModel;
27 | }
28 |
29 | const model: StoreModel = {
30 | beholder: {
31 | beholderName: 'foo',
32 | list: [],
33 | setList: action((state, payload) => {
34 | state.list = payload;
35 | }),
36 | },
37 | creator: {
38 | creatorName: 'foo',
39 | list: [],
40 | setList: action((state, payload) => {
41 | state.list = payload;
42 | }),
43 | },
44 | };
45 |
46 | const store = createStore(model);
47 |
48 | store.getState().beholder.beholderName;
49 | store.getState().beholder.list;
50 | store.getActions().creator.setList([{ id: 1, name: 'foo' }]);
51 |
--------------------------------------------------------------------------------
/tests/immer.test.js:
--------------------------------------------------------------------------------
1 | import './lib/enable-immer-map-set';
2 | import React, { act } from 'react';
3 | import { render } from '@testing-library/react';
4 | import { createStore, action, StoreProvider, useStoreState } from '../src';
5 |
6 | test('Map and Set within a store work as expected', () => {
7 | // ARRANGE
8 | const store = createStore({
9 | products: new Set(),
10 | addProduct: action((state, payload) => {
11 | state.products.add(payload);
12 | }),
13 | });
14 |
15 | function App() {
16 | const products = useStoreState((state) => state.products);
17 | const productsArray = [...products];
18 | return (
19 |
20 | {productsArray.length === 0 ? 'none' : productsArray.join(',')}
21 |
22 | );
23 | }
24 |
25 | const { getByTestId } = render(
26 |
27 | ,
29 | );
30 |
31 | // ASSERT
32 | expect(getByTestId('products').textContent).toBe('none');
33 |
34 | // ACT
35 | act(() => {
36 | store.getActions().addProduct('potato');
37 | store.getActions().addProduct('avocado');
38 | });
39 |
40 | // ASSERT
41 | expect(getByTestId('products').textContent).toBe('potato,avocado');
42 | });
43 |
--------------------------------------------------------------------------------
/examples/react-native-todo/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | #
3 | .DS_Store
4 |
5 | # Xcode
6 | #
7 | build/
8 | *.pbxuser
9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | ios/.xcode.env.local
24 |
25 | # Android/IntelliJ
26 | #
27 | build/
28 | .idea
29 | .gradle
30 | local.properties
31 | *.iml
32 | *.hprof
33 | .cxx/
34 | *.keystore
35 | !debug.keystore
36 |
37 | # node.js
38 | #
39 | node_modules/
40 | npm-debug.log
41 | yarn-error.log
42 |
43 | # fastlane
44 | #
45 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
46 | # screenshots whenever they are needed.
47 | # For more information about the recommended setup visit:
48 | # https://docs.fastlane.tools/best-practices/source-control/
49 |
50 | **/fastlane/report.xml
51 | **/fastlane/Preview.html
52 | **/fastlane/screenshots
53 | **/fastlane/test_output
54 |
55 | # Bundle artifact
56 | *.jsbundle
57 |
58 | # Ruby / CocoaPods
59 | /ios/Pods/
60 | /vendor/bundle/
61 |
62 | # Temporary files created by Metro to check the health of the file watcher
63 | .metro-health-check*
64 |
--------------------------------------------------------------------------------
/website/docs/docs/recipes/hot-reloading.md:
--------------------------------------------------------------------------------
1 | # Hot Reloading
2 |
3 | Easy Peasy supports hot reloading - i.e. being able to dynamically update your model at development time whilst maintaining the current state of your application. This can lead to a much improved developer experience.
4 |
5 | In order to configure your application to allow hot reloading of your Easy Peasy store you will need to do the following:
6 |
7 | ```javascript
8 | // src/store/index.js
9 |
10 | import { createStore } from "easy-peasy";
11 | import model from "./model";
12 |
13 | const store = createStore(model);
14 |
15 | // Wrapping dev only code like this normally gets stripped out by bundlers
16 | // such as Webpack when creating a production build.
17 | if (process.env.NODE_ENV === "development") {
18 | if (module.hot) {
19 | module.hot.accept("./model", () => {
20 | store.reconfigure(model); // 👈 Here is the magic
21 | });
22 | }
23 | }
24 |
25 | export default store;
26 | ```
27 |
28 | Note how you can call the [store's](/docs/api/store.html) `reconfigure` method in order to reconfigure the store with your updated model. The existing state will be maintained.
29 |
30 | You can [view a demo repository configured for hot reloading here](https://github.com/ctrlplusb/easy-peasy-hot-reload).
--------------------------------------------------------------------------------
/src/use-local-store.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react';
2 | import { useMemoOne } from './lib';
3 | import { createStore } from './create-store';
4 |
5 | export function useLocalStore(
6 | modelCreator,
7 | dependencies = [],
8 | configCreator = null,
9 | ) {
10 | const storeRef = useRef();
11 |
12 | const configRef = useRef();
13 |
14 | const store = useMemoOne(() => {
15 | const previousState =
16 | storeRef.current != null ? storeRef.current.getState() : undefined;
17 | const config =
18 | configCreator != null
19 | ? configCreator(previousState, configRef.current)
20 | : undefined;
21 | const _store = createStore(modelCreator(previousState), config);
22 | configRef.current = config;
23 | storeRef.current = _store;
24 | return _store;
25 | }, dependencies);
26 |
27 | const [currentState, setCurrentState] = useState(() => store.getState());
28 |
29 | useEffect(() => {
30 | setCurrentState(store.getState());
31 | return store.subscribe(() => {
32 | const nextState = store.getState();
33 | if (currentState !== nextState) {
34 | setCurrentState(nextState);
35 | }
36 | });
37 | }, [store]);
38 |
39 | return [currentState, store.getActions(), store];
40 | }
41 |
--------------------------------------------------------------------------------
/tests/testing/listeners.test.js:
--------------------------------------------------------------------------------
1 | import { action, createStore, actionOn } from '../../src';
2 |
3 | const model = {
4 | todos: [],
5 | logs: [],
6 | addTodo: action((state, payload) => {
7 | state.todos.push(payload);
8 | }),
9 | onTodoAdded: actionOn(
10 | (actions) => actions.addTodo,
11 | (state, target) => {
12 | state.logs.push(`Added todo: ${target.payload}`);
13 | },
14 | ),
15 | };
16 |
17 | test('listener gets dispatched when target fires', () => {
18 | // ARRANGE
19 | const store = createStore(model, {
20 | mockActions: true,
21 | });
22 |
23 | // ACT
24 | store.getActions().addTodo('Write docs');
25 |
26 | // ASSERT
27 | expect(store.getMockedActions()).toMatchObject([
28 | { type: '@action.addTodo', payload: 'Write docs' },
29 | {
30 | type: '@actionOn.onTodoAdded',
31 | payload: {
32 | type: '@action.addTodo',
33 | payload: 'Write docs',
34 | },
35 | },
36 | ]);
37 | });
38 |
39 | test('listener acts as expected', () => {
40 | // ARRANGE
41 | const store = createStore(model);
42 |
43 | // ACT
44 | store.getListeners().onTodoAdded({
45 | type: '@action.addTodo',
46 | payload: 'Test listeners',
47 | });
48 |
49 | // ASSERT
50 | expect(store.getState().logs).toEqual(['Added todo: Test listeners']);
51 | });
52 |
--------------------------------------------------------------------------------
/examples/react-native-todo/ios/ReactNativeTodo/AppDelegate.mm:
--------------------------------------------------------------------------------
1 | #import "AppDelegate.h"
2 |
3 | #import
4 |
5 | @implementation AppDelegate
6 |
7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
8 | {
9 | self.moduleName = @"ReactNativeTodo";
10 | // You can add your custom initial props in the dictionary below.
11 | // They will be passed down to the ViewController used by React Native.
12 | self.initialProps = @{};
13 |
14 | return [super application:application didFinishLaunchingWithOptions:launchOptions];
15 | }
16 |
17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
18 | {
19 | #if DEBUG
20 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
21 | #else
22 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
23 | #endif
24 | }
25 |
26 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
27 | ///
28 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
29 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
30 | /// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`.
31 | - (BOOL)concurrentRootEnabled
32 | {
33 | return true;
34 | }
35 |
36 | @end
37 |
--------------------------------------------------------------------------------
/examples/react-native-todo/src/components/Toolbar.tsx:
--------------------------------------------------------------------------------
1 | import React, {PropsWithChildren} from 'react';
2 | import {View, Switch, Text, StyleSheet} from 'react-native';
3 | import {useStoreState} from '../store';
4 |
5 | type Props = PropsWithChildren<{
6 | isEnabled: boolean;
7 | setIsEnabled: Function;
8 | }>;
9 |
10 | const Toolbar = ({isEnabled, setIsEnabled}: Props): JSX.Element => {
11 | const {completedCount, totalCount} = useStoreState(state => state);
12 |
13 | const toggleSwitch = () => {
14 | setIsEnabled((previousState: Boolean) => !previousState);
15 | };
16 |
17 | return (
18 |
19 |
20 | {completedCount} of {totalCount}
21 |
22 |
23 | Hide Done
24 |
26 |
27 | );
28 | };
29 |
30 | const styles = StyleSheet.create({
31 | row: {
32 | flexDirection: 'row',
33 | justifyContent: 'space-between',
34 | alignItems: 'center',
35 | paddingVertical: 10,
36 | },
37 | switchLabel: {
38 | alignItems: 'center',
39 | flexDirection: 'row',
40 | },
41 | label: {
42 | marginHorizontal: 5,
43 | fontSize: 16,
44 | },
45 | });
46 |
47 | export default Toolbar;
48 |
--------------------------------------------------------------------------------
/examples/kanban/src/components/TaskList/AddTask.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { useStoreActions, useStoreState } from '../../store';
3 | import { StoreModel } from '../../store/model';
4 | import generateId from '../../utils/generateId';
5 |
6 | const AddTask: React.FC<{ list: keyof StoreModel }> = ({ list }) => {
7 | const [name, setName] = useState('');
8 | const { name: listName } = useStoreState((state) => state[list]);
9 | const { addTask } = useStoreActions((actions) => actions[list]);
10 |
11 | return (
12 |