state-decorator 7.0.0-beta.0 → 7.0.0-beta.10-dev

package/README.md

@@ -19,10 +19,13 @@ The StateDecorator is a set of Reacts hook that manages a complex component stat
 
 # V7: Partial state and new hooks
 
+- React 17 (upcoming V8 for React 18)
 - All effects can now return a partial state that will be merged with current state.
 - More documentation on global and local store use cases.
 - **useLocalStore** and **useStore** now have a parameter to specify if the React component must re-rerender after a state change.
 - New **useStoreContextSlice** hook was added to get a slice of a store in a context.
+- New **onMountDeferred** to execute initialization code after initial render
+- New effect helpers
 - Removed useBindStore hook.
 
 # 🏎️ V6: The Store
@@ -55,8 +58,7 @@ yarn add state-decorator
 ### Example
 
 ```typescript
-import React from 'react';
-import { useLocalStore, StoreActions } from 'state-decorator';
+import { useLocalStore, StoreConfig } from "state-decorator";
 
 // Typings
 
@@ -81,45 +83,48 @@ type Props = {
 };
 
 // Initial state & actions
-
-export const getInitialState = (): State => ({
-  selectedUserId: null,
-  user: null,
-});
-
-export const userAppActions: StoreActions<State, Actions, Props> = {
-  // synchronous action (simple form)
-  selectUser: ({ args: [id] }) => ({ selectedUserId: id }),
-
-  // a synchronous action with side effects
-  selectAndLoadUser: {
-    // effects contain only immutable state changes
-    effects: ({ args: [id] }) => ({ selectedUserId: id }),
-    // side effects (ie. other effects than state changes), using "actions" alias
-    sideEffects: ({ a }) => {
-      a.loadUser();
+const config: StoreConfig<State, Actions, Props> = {
+  getInitialState: () => ({
+    selectedUserId: null,
+    user: null,
+  }),
+
+  actions: {
+    // synchronous action (simple form)
+    selectUser: ({ args: [id] }) => ({ selectedUserId: id }),
+
+    // a synchronous action with side effects
+    selectAndLoadUser: {
+      // effects contain only immutable state changes
+      effects: ({ args: [id] }) => ({ selectedUserId: id }),
+      // side effects (ie. other effects than state changes), using "actions" alias
+      sideEffects: ({ a }) => {
+        a.loadUser();
+      },
     },
-  },
 
-  // asynchronous action
-  loadUser: {
-    // promise provider, can use action context (ctx) to get current state, args, props etc.
-    getPromise: (ctx) => Promise.resolve({ firstName: 'John', lastName: 'Doe' }),
-    // state changes
-    effects: ({ res }) => ({ user: res }),
-    // state changes if error
-    errorEffects: ({ error }) => ({ user: null }),
-    // side effects here
-    sideEffects: ({ res, actions }) => {},
-    // side effects if error
-    errorSideEffects: ({ err, actions }) => {},
-    // many more options available here, read the doc!
+    // asynchronous action
+    loadUser: {
+      // promise provider, can use action context (ctx) to get current state, args, props etc.
+      getPromise: (ctx) =>
+        Promise.resolve({ firstName: "John", lastName: "Doe" }),
+      // state changes
+      effects: ({ res }) => ({ user: res }),
+      // state changes if error
+      errorEffects: ({ error }) => ({ user: null }),
+      // side effects here
+      sideEffects: ({ res, actions }) => {},
+      // side effects if error
+      errorSideEffects: ({ err, actions }) => {},
+      // many more options available here, read the doc!
+    },
   },
 };
 
+
 // Bind to react component and use state/actions
 export function App(props: Props) => {
-  const { state, actions } = useLocalStore(getInitialState, userAppActions, props);
+  const { state, actions } = useLocalStore(config);
   return (
     <div>
       {state.user && (
@@ -157,12 +162,13 @@ export function App(props: Props) => {
 The initial state is build using a function provided to the store.
 
 ```typescript
-export const getInitialState = (p: Props): State => ({
-  counter: 0,
-});
+const config: StoreConfig<State, Actions, Props> = {
+  getInitialState: (p) => ({ counter: 0 }),
+  actions: {},
+};
 
 export const CounterContainer = () => {
-  const { state, actions } = useLocalStore(getInitialState, actionsImpl);
+  const { state, actions } = useLocalStore(config);
   return <CounterView {...state} {...actions} />;
 };
 ```
@@ -182,6 +188,7 @@ The action context contain all the data needed to implement the actions. It cont
 | derived       | ds    | everywhere                     | The derived state (from props/state)                    |
 | promiseId     |       | asynchronous actions callbacks | Parallel asynchronous actions promise identifier        |
 | notifyWarning |       | side effects                   | Injected function if set at store or global level       |
+| clearError    |       | side effects                   | Clear an error from ErrorMap                            |
 | indices       |       | onPropsChange                  | Indices in the getDeps array of changed props           |
 | isInit        |       | onPropsChange                  | Whether the onPropsCHange is executed during init phase |
 
@@ -202,8 +209,10 @@ action: (ctx) => ctx.state, // changes to be merged to current state
 Example:
 
 ```typescript
-const actions: StoreActions<State, Actions> = {
-  setText: ({ args: [newText] }) => ({ text: newText }),
+const config: StoreConfig<State, Actions, Props> = {
+  actions: {
+    setText: ({ args: [newText] }) => ({ text: newText }),
+  },
 };
 ```
 
@@ -226,14 +235,16 @@ action: {
 Example:
 
 ```typescript
-const actions: StoreActions<State, Actions> = {
-  setText: {
-    effects: ({ args: [newText] }) => ({ text: newText }),
-    // use either debounceTimeout or debounceSideEffectsTimeout
-    // debounceTimeout: 5000,
-    debounceSideEffectsTimeout: 5000,
-    sideEffects: ({ a }) => {
-      a.saveDocument();
+const config: StoreConfig<State, Actions, Props> = {
+  actions: {
+    setText: {
+      effects: ({ args: [newText] }) => ({ text: newText }),
+      // use either debounceTimeout or debounceSideEffectsTimeout
+      // debounceTimeout: 5000,
+      debounceSideEffectsTimeout: 5000,
+      sideEffects: ({ a }) => {
+        a.saveDocument();
+      },
     },
   },
 };
@@ -275,14 +286,16 @@ action: {
 Example:
 
 ```typescript
-const actions: StoreActions<State, Actions> = {
-  loadList: {
-    getPromise: () => fetch('https://myapi/myservices').then((res) => (res.ok ? res.json() : Promise.reject())),
-    effects: ({ res }) => ({ list: res }),
-    sideEffects: ({ a }) => {
-      a.otherAction();
+const config: StoreConfig<State, Actions, Props> = {
+  actions: {
+    loadList: {
+      getPromise: () => fetch('https://myapi/myservices').then((res) => (res.ok ? res.json() : Promise.reject())),
+      effects: ({ res }) => ({ list: res }),
+      sideEffects: ({ a }) => {
+        a.otherAction();
+      },
+      getErrorMessage: () => 'Cannot load list',
     },
-    getErrorMessage: () => 'Cannot load list',
   },
 };
 ```
@@ -380,11 +393,13 @@ const store = useLocalStore(getInitialState, actionsImpl, props, {
 
 ```typescript
 // action implementation
-const actions: StoreActions<State, Actions> = {
-  loadList: {
-    getPromise: () => new Promise((_, reject) => setTimeout(reject, 500, new Error('Too bad'))),
-    getSuccessMessage: () => 'success!',
-    getErrorMessage: ({ err }) => `Error: ${err.message}`,
+const config: StoreConfig<State, Actions, Props> = {
+  actions: {
+    loadList: {
+      getPromise: () => new Promise((_, reject) => setTimeout(reject, 500, new Error('Too bad'))),
+      getSuccessMessage: () => 'success!',
+      getErrorMessage: ({ err }) => `Error: ${err.message}`,
+    },
   },
 };
 ```
@@ -445,6 +460,8 @@ if (errorMap.action1 instanceof MyCustomError){
 
 Recipe: When only using the **errorMap** to manage errors (ie. there's no effects nor message and so on), the error is considered _not managed_ resulting in a rejected promise and global **asyncErrorHandler** called with _managed_ flag set to false. In that case, set **isErrorManaged** to `true` to specify that the error is _managed_ externally.
 
+The error map is updated when the action is called again, or call **clearError** in a side effect.
+
 ## <a name="ConflictingActions"></a>Conflicting actions
 
 The StateDecorator is managing the asynchronous action calls one at a time (default) or in parallel.
@@ -499,10 +516,20 @@ setGlobalConfig({
 On a specific store:
 
 ```typescript
-import { createStore } from 'state-decorator';
+import { createStore, StoreConfig } from 'state-decorator';
 import { optimisticActions } from 'state-decorator/middlewares';
 
-const store = createStore(getInitialState, actionsImpl, options, [optimisticActions()],
+const config: StoreConfig<State, Actions, Props> = {
+  getInitialState: () => ({
+    /* ... */
+  }),
+  actions: {
+    /* ... */
+  },
+  middlewares: [optimisticActions()],
+};
+
+const store = createStore(config);
 ```
 
 An optimistic action assumes that the action will, most of the time, succeed. So it will apply the effects as soon as the asynchronous action is called (as opposite to the regular effects which are applied when the promise is resolved).
@@ -520,11 +547,13 @@ The undo strategy is the following:
 Example:
 
 ```typescript
-const actions: StoreActions<State, Actions> = {
-  deleteItem: {
-    getPromise: ([id]) => new Promise((resolve) => setTimeout(resolve, 500)),
-    optimisticEffects: ({ args: [id] }) => ({ list: list.filter((item) => item.id === id) }),
-    errorEffects: ({err} => ({ err: error.message }),
+const config: StoreConfig<State, Actions, Props> = {
+  actions: {
+    deleteItem: {
+      getPromise: ([id]) => new Promise((resolve) => setTimeout(resolve, 500)),
+      optimisticEffects: ({ args: [id] }) => ({ list: list.filter((item) => item.id === id) }),
+      errorEffects: ({err} => ({ err: error.message }),
+    },
   },
 };
 ```
@@ -548,119 +577,167 @@ Ongoing asynchronous actions can be aborted using, under the hood, the [AbortCon
 3. An abort is a specific failure of an action, ie. **errorEffects** and **errorSideEffects** will be called. Use the error type and name to distinguish an aborted action from a regular failed action.
 
 ```typescript
-export const actionsAbort: StoreActions<State, Actions, Props> = {
-  onAction: {
-    abortable: true,
-    preEffects: () => ({ isError: false, isSuccess: false, isAborted: false }),
-    getPromise: ({s, args: [willCrash] abortSignal}) =>
-      new Promise((resolve, reject) => {
-        const timeout = window.setTimeout(willCrash ? reject : resolve, 2500, willCrash ? new Error('boom') : 'result');
-        abortSignal.addEventListener('abort', () => {
-          window.clearTimeout(timeout);
-          reject(new DOMException('Aborted', 'AbortError'));
-        });
-      }),
-    errorEffects: ({ err}) => (err.name === 'AbortError' ? { isAborted: true } : { isError: true }),
-    effects: () => ({ isSuccess: true }),
-    errorSideEffects: ({ err }) => {
-      if (e.name === 'AbortError') {
-        console.log('AbortError side effect');
-      } else {
-        console.log('Other error side effect');
-      }
+const config: StoreConfig<State, Actions, Props> = {
+  actions: {
+    onAction: {
+      abortable: true,
+      preEffects: () => ({ isError: false, isSuccess: false, isAborted: false }),
+      getPromise: ({s, args: [willCrash] abortSignal}) =>
+        new Promise((resolve, reject) => {
+          const timeout = window.setTimeout(willCrash ? reject : resolve, 2500, willCrash ? new Error('boom') : 'result');
+          abortSignal.addEventListener('abort', () => {
+            window.clearTimeout(timeout);
+            reject(new DOMException('Aborted', 'AbortError'));
+          });
+        }),
+      errorEffects: ({ err}) => (err.name === 'AbortError' ? { isAborted: true } : { isError: true }),
+      effects: () => ({ isSuccess: true }),
+      errorSideEffects: ({ err }) => {
+        if (e.name === 'AbortError') {
+          console.log('AbortError side effect');
+        } else {
+          console.log('Other error side effect');
+        }
+      },
     },
   },
 };
 ```
 
+Note: ongoing abortable actions will be automatically aborted on store destruction (during React component unmount for example). The list of aborted actions is available in the **onUnmount** callback in the store's options.
+
 [![Edit Abort](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/abort-v6-uvnl7)
 
-# Derived state
+## Helper effect functions
 
-A derived state is a state that can be deduced from state and props.
+For common / simple use cases, some helpers functions are provided to write basic action effects and improve actions readability.
+
+Example
 
 ```typescript
-import { createStore } from 'state-decorator';
+import { setArgIn } from 'state-decorator/helpers';
 
 type State = {
-  value: number;
+  myProp: string;
 };
 
 type Actions = {
-  add1: () => void;
-};
-
-type Props = {
-  propIn: number;
+  setMyProp: (v: string) => void;
 };
 
-type DerivedState = {
-  derivedProp: number;
+const actions: StoreActions<State, Actions> = {
+  setMyProp: setArgIn('myProp'),
+  // same as
+  // setMyProp: ({ args: [v] }) => ({ myProp: v }),
 };
+```
 
-const store = createStore<State, Actions, Props, DerivedState>(
-  () => ({ value: 0 }),
-  {
-    add1: ({ s }) => ({ ...s, value: s.value + 1 }),
-  },
-  {
-    derivedState: {
-      derivedProp: {
-        // get the list of dependencies to be checked to trigger the computation of the derived state
-        // if state.value AND/OR props.prop1 changes, derivedProp is recomputed
-        getDeps: ({ state, props }) => [state.value, props.propIn],
-        // compute derived state from state & props (use short aliases)
-        get: ({ s, p }) => s.value * p.propIn,
-      },
-    },
-  }
-);
+| Name           | Purpose                                                                                                                                                   | Action signatue                |
+| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
+| setArgIn       | Effect function to update a state property from action first argument                                                                                     | (v:T) => void                  |
+| setTrueIn      | Effect function to update a boolean state property to true                                                                                                | () => void                     |
+| setFalseIn     | Effect function to update a boolean state property to false                                                                                               | () => void                     |
+| toggleProp     | Effect function to toggle a boolean state property                                                                                                        | () => void                     |
+| setArgsInMap   | Effect function to update a state property of type Record<string, T> using first action argument as key and second as value                               | (id: string, v:T) => void      |
+| setArgsInArray | Effect function to update a state property of type T[] using first action argument as index and second as value                                           | (index: number, v:T) => void   |
+| setResIn       | Effect function of asynchronous action to update a state property with the result of the promise                                                          | () => Promise<T>               |
+| setResInArray  | Effect function to update a state property of type T[] using index from first action argument as index and as value the result of the promise             | (index: number) => Promise <T> |
+| setResInMap    | Effect function to update a state property of type Record<string, T> using key from first action argument as index and as value the result of the promise | (id: string) => Promise <T>    |
 
-export function App(props: Props) {
-  const { state } = useStore(store, props);
-  // state contains the store state and derived state
-  return <div>{state.derivedProp}</div>;
-}
-```
+## Call actions on mount
 
-## Recipes
+When store is created (for example whe React component in mounted), the **onMount** option is called.
 
-- Derived state is the same as using _useMemo_ in sub component.
-- If the derived state is needed in one component only, it may prove better to use a _useMemo_ in this component to save memory when the component is unmounted and store not.
-- In general, do **not** compute derived values directly in state, it's error prone as you can forget some places or implement different logic.
-- Use derived state especially if this state is shared accross several sub components
+```typescript
+import { StoreConfig } from 'state-decorator';
 
-# Call actions on mount
+const config: StoreConfig<State, Actions, Props> = {
+  getInitialState,
+  actions,
+  onMount: ({ p }) => {
+    p.loadParentList();
+  },
+};
+```
 
-When a hook that creates / binds a store is mounted, the **onMount** option is called.
+After React component is mounted using _useLocalStore_, the **onMountDeferred** option is called (in a _useEffect_).
+The **onMount** is called _during_ the render of the hooks. If the onMount code is containing a function that is changing parent state,
+React will not update the parent state and will issue a warning.
 
 ```typescript
-import { createStore } from 'state-decorator';
+import { StoreConfig } from 'state-decorator';
 
-// global store
-const store = createStore(getInitialState, actionsImpl, {
-  onMount: ({ a }) => {
-    a.loadList;
+const config: StoreConfig<State, Actions, Props> = {
+  getInitialState,
+  actions,
+  onMountDeferred: ({ p }) => {
+    p.loadParentList();
   },
-});
+};
+```
 
-store.init(initialProps);
+If an initial action is launched each time a property changes, consider using the **onMount** flag of the **onPropsChange** entry.
+
+## Call actions on store destruction / unmount
+
+When the store is destroyed (for example on React component unmounted), the **onUnmount** option is called.
+
+```typescript
+import { StoreConfig } from 'state-decorator';
+
+const config: StoreConfig<State, Actions, Props> = {
+  getInitialState,
+  actions,
+  onUnmount: ({ s, abortedActions }) => {
+    // ex: store s in local storage
+    // ex: clean cache of aborted actions
+  },
+};
 ```
 
+## State sharing and slices
+
+- Declare a store and bind it to a component using _useStore_ or _useBindStore_ hooks.
+- Deeper in the tree component, use _useStoreSlice_ to get a store slice.
+- Component using slices will be refreshed only if their store slice changes.
+
 ```typescript
-import { createStore } from 'state-decorator';
+import React from 'react';
+import { useStore, useStoreSlice, StoreActions } from 'state-decorator';
 
-// local store
-function Container(p: ContainerProps) {
-  const store = useLocalStore(getInitialState, actionsImpl, p, {
-    onMount: ({ a }) => {
-      a.loadList;
-    },
-  });
+// Declare typings & actions as above
+
+// Create a store
+
+export const store = createStore(config);
+
+// Bind to react component
+
+export function Container(prop: Props) {
+  const { state, actions } = useStore(store, props);
+
+  // or
+  // useBindStore(store, props);
+  // if you are not interested in getting the state here
+
+  return <div />;
+}
+
+// Components deeper in the component tree will be refreshed if, and only if,
+// slice is changed (here: text property)
+
+export function SubComponent2() {
+  const s = useStoreSlice(store, ['text']);
+  return <div>{s.text}</div>;
+}
+
+export function SubComponent() {
+  const s = useStoreSlice(store, (s) => ({ text: s.text }));
+  return <div>{s.text}</div>;
 }
 ```
 
-If an initial action is launched each time a property changes, consider using the **onMount** flag of the **onPropsChange** entry.
+[![Edit Slice](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/slices-v6-eg471?file=/src/SliceView.tsx)
 
 # Update store when props change
 
@@ -669,7 +746,9 @@ If an initial action is launched each time a property changes, consider using th
 ```typescript
 import { createStore } from 'state-decorator';
 
-const store = createStore(getInitialState, actionsImpl, {
+const config: StoreConfig<State, Actions, Props> = {
+  getInitialState,
+  actions,
   onPropsChange: {
     // list of depedencies that should trigger effects & side effects if changed
     getDeps: (p) => [p.id],
@@ -682,7 +761,7 @@ const store = createStore(getInitialState, actionsImpl, {
     // whether apply effects & side effects on mount
     onMount: true,
   },
-});
+};
 ```
 
 ## Multiple props change configuration
@@ -694,9 +773,11 @@ The store can manage several props change configurations to have a better granul
 - Side effects are invoked after all effects using computed state
 
 ```typescript
-import { createStore } from 'state-decorator';
+import { StoreConfig } from 'state-decorator';
 
-const store = createStore(getInitialState, actionsImpl, {
+const config: StoreConfig<State, Actions, Props> = {
+  getInitialState,
+  actions,
   onPropsChange: [
     {
       getDeps: (p) => [p.id],
@@ -716,7 +797,7 @@ const store = createStore(getInitialState, actionsImpl, {
       },
     },
   ],
-});
+};
 ```
 
 ## OnMount
@@ -726,7 +807,11 @@ If the onMount flag is set on the props change configuration, the effects and si
 It allows to trigger same actions at creation time and when the dependencies props are changed.
 
 ```typescript
-const store = createStore(getInitialState, actionsImpl, {
+import { StoreConfig } from 'state-decorator';
+
+const config: StoreConfig<State, Actions, Props> = {
+  getInitialState,
+  actions,
   onMount: ({ p }) => {
     a.loadUser(p.userId);
   },
@@ -739,11 +824,15 @@ const store = createStore(getInitialState, actionsImpl, {
       },
     },
   ],
-});
+};
 
 // SAME AS
 
-const store = createStore(getInitialState, actionsImpl, {
+import { StoreConfig } from 'state-decorator';
+
+const config: StoreConfig<State, Actions, Props> = {
+  getInitialState,
+  actions,
   onPropsChange: [
     {
       getDeps: (p) => [p.userId],
@@ -754,7 +843,7 @@ const store = createStore(getInitialState, actionsImpl, {
       onMount: true,
     },
   ],
-});
+};
 ```
 
 **Caution**: the effects are executed too. Use the isInit parameter is passed to the context to apply or not state change.
@@ -840,7 +929,7 @@ import { useLocalStore } from 'state-decorator';
 // Create and bind to react component
 // Each time the store state changes, a re-render is done.
 export function Container(props: Props) {
-  const { state, actions } = useLocalStore(getInitialState, userAppActions, props);
+  const { state, actions } = useLocalStore(config, props);
   return (
     <div>
       <Title text={state.title} />
@@ -928,7 +1017,7 @@ export const StoreContext = createContext<StoreContextProps>(null);
 // But this context is NOT refreshed if the store state is changed
 export function StoreContextProvider(p: { children: any; propIn: string }) {
   const { children, ...props } = p;
-  const store = useLocalStore(getInitialState, actionsImpl, props);
+  const store = useLocalStore(config, props);
   return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
 }
 
@@ -968,6 +1057,59 @@ function Subtitle(props: { subtitle: string }) {
 }
 ```
 
+# Derived state
+
+A derived state is a state that can be deduced from state and props.
+
+```typescript
+import { createStore } from 'state-decorator';
+
+type State = {
+  value: number;
+};
+
+type Actions = {
+  add1: () => void;
+};
+
+type Props = {
+  propIn: number;
+};
+
+type DerivedState = {
+  derivedProp: number;
+};
+
+const store = createStore<State, Actions, Props, DerivedState>({
+  getInitialState: () => ({ value: 0 }),
+  actions: {
+    add1: ({ s }) => ({ ...s, value: s.value + 1 }),
+  },
+  derivedState: {
+    derivedProp: {
+      // get the list of dependencies to be checked to trigger the computation of the derived state
+      // if state.value AND/OR props.prop1 changes, derivedProp is recomputed
+      getDeps: ({ state, props }) => [state.value, props.propIn],
+      // compute derived state from state & props (use short aliases)
+      get: ({ s, p }) => s.value * p.propIn,
+    },
+  },
+});
+
+export function App(props: Props) {
+  const { state } = useStore(store, props);
+  // state contains the store state and derived state
+  return <div>{state.derivedProp}</div>;
+}
+```
+
+## Recipes
+
+- Derived state is the same as using _useMemo_ in sub component.
+- If the derived state is needed in one component only, it may prove better to use a _useMemo_ in this component to save memory when the component is unmounted and store not.
+- In general, do **not** compute derived values directly in state, it's error prone as you can forget some places or implement different logic.
+- Use derived state especially if this state is shared accross several sub components
+
 # Global configuration
 
 Overrides configuration to set properties that will be used by all stores.
@@ -1004,7 +1146,7 @@ To debug actions, add a middleware to the store.
 import { logEffects } from 'state-decorator/middlewares';
 
 function Container(props: Props) {
-  const { state, actions } = useLocalStore(getInitialState, actionsImpl, props, { name: 'My Store' }, [logEffects()]);
+  const { state, actions } = useLocalStore({ getInitialState, actions, middlewares: [logEffects()] });
   return <div />;
 }
 ```
@@ -1018,14 +1160,14 @@ function logger(...args: any[]) {
 
 const logMiddleware = logEffects(logger);
 
-const store = createStore(getInitialState, actionsImpl, props, options, [logMiddleware]);
+const store = createStore({ getInitialState, actions, middlewares: [logMiddleware] });
 ```
 
 Example:
 
 ```
 [StateDecorator sample] loadList effects {list: Array(10), prop1: "", prop2: "", prop3: ""} loading: false
-middlewares.ts:36 [StateDecorator sample] setProp1 effects {list: Array(10), prop1: "92", prop2: "", prop3: ""}
+[StateDecorator sample] setProp1 effects {list: Array(10), prop1: "92", prop2: "", prop3: ""}
 ```
 
 ## Detailed Logger
@@ -1034,9 +1176,7 @@ middlewares.ts:36 [StateDecorator sample] setProp1 effects {list: Array(10), pro
 import { logDetailedEffects } from 'state-decorator/middlewares';
 
 function Container(props: Props) {
-  const { state, actions } = useLocalStore(getInitialState, actionsImpl, props, { name: 'My Store' }, [
-    logDetailedEffects(),
-  ]);
+  const { state, actions } = useLocalStore({ getInitialState, actions, middlewares: [logDetailedEffects()] });
   return <div />;
 }
 ```
@@ -1065,7 +1205,7 @@ You can connect any StateDecorator store to [Chrome Redux devtools extension](ht
 import { devtools } from 'state-decorator/middlewares';
 
 function Container(props: Props) {
-  const { state, actions } = useLocalStore(getInitialState, actionsImpl, props, { name: 'My Store' }, [devtools()]);
+  const { state, actions } = useLocalStore({ getInitialState, actions, middlewares: [devtools()] });
   return <div />;
 }
 ```
@@ -1107,7 +1247,8 @@ describe('Todo', () => {
   // this store can be shared accross tests because it is immutable
   const store = createMockFromStore(todoStore)
     // or
-    //   const store = createMockStore(getInitialState, actions, props, options)
+    //   const store = createMockStore(storeConfig, props)
+
     // initial state / props can be set in full form or partial form
     .setPartialState({
       idCount: 3,
@@ -1579,7 +1720,65 @@ TypeError: Cannot set property 'crash' of null
 
 # Migration
 
-## Step 1: v5 compatibility layer
+## V6 to V7
+
+### Step 1: V6 compatibility layer
+
+```diff
+-import useLocalStore from 'state-decorator';
+-import { useLocalStore } from 'state-decorator';
+
++import { useLocalStoreV6 } from 'state-decorator';
+```
+
+### Step 2: Migrate code
+
+#### Config
+
+```diff
+- const getInitialState: (p:Props) => ({myProp: ''});
+-
+- const actions: StoreActions<State, Actions, Props> = {
+-  myAction: ({s, args: [v]}) => ({ ...s, myProp: v })
+-}
+-
+- const options: StoreOptions<State, Action, Props> = {
+-   onMount: () => {},
+-   onPropsChange: {
+-     getDeps: () => [],
+-     effects: ({s, p}) => ({ ...s, myProp: p.prop }),
+-   }
+- };
+-
+- function MyComponent(p:Props) {
+-   const {state, actions} = useLocalStore(getInitialState, actions, props, options, [logEffects()]);
+-   return <div>{myProp}</div>;
+- }
+
++ const config:StoreConfig<State, Actions, Props> = {
++   getInitialState: () => ({ myProp: '' }),
++   actions: {
++     myAction: ({args: [v]}) => ({ myProp: v})
++     // or
++     myAction: setArgIn('myProp'),
++   },
++   onMount: () => {},
++   onPropsChange: {
++     getDeps: () => [],
++     effects: ({ p }) => ({ myProp: p.prop })
++   },
++   middlewares: [logEffects()],
++ }
++
++ function MyComponent(p:Props) {
++   const {state, actions} = useLocalStore(config);
++   return <div>{myProp}</div>;
++ }
+```
+
+## V5 to V6
+
+### Step 1: v5 compatibility layer
 
 To use the new engine while still using v5 API, juste import the v5 compatibility layer.
 You can new store in new code.
@@ -1600,26 +1799,26 @@ setGlobalConfig({
 });
 ```
 
-## Step 2: Migrate code but keep v5 tests
+### Step 2: Migrate code but keep v5 tests
 
-### Code
+#### Code
 
-#### Types
+##### Types
 
 | Before                | After        |
 | --------------------- | ------------ |
 | StateDecoratorActions | StoreActions |
 | StateDecoratorOptions | StoreOptions |
 
-#### Optimistic actions
+##### Optimistic actions
 
 If you are using optimistic effects, make sure to set the **optimisticActions** middleware to your stores, see [Optimistic actions](#optimistic-actions).
 
-### Hooks
+#### Hooks
 
 Choose one of _useLocalStore_, _useStore_, _useBindStore_ or _useStoreSlice_.
 
-### Actions
+#### Actions
 
 - rename action properties
 
@@ -1660,9 +1859,9 @@ Choose one of _useLocalStore_, _useStore_, _useBindStore_ or _useStoreSlice_.
   };
 ```
 
-### Options
+#### Options
 
-#### onMount
+##### onMount
 
 ```diff
 - const options: StateDecoratorOptions<S, A, P> = {
@@ -1674,7 +1873,7 @@ Choose one of _useLocalStore_, _useStore_, _useBindStore_ or _useStoreSlice_.
 +} ;
 ```
 
-#### logEnabled
+##### logEnabled
 
 ```diff
 - function Container(props: Props) {
@@ -1690,7 +1889,7 @@ Choose one of _useLocalStore_, _useStore_, _useBindStore_ or _useStoreSlice_.
 + }
 ```
 
-#### Props changes
+##### Props changes
 
 ```diff
 - const options: StateDecoratorOptions<S, A, P> = {
@@ -1712,7 +1911,7 @@ Choose one of _useLocalStore_, _useStore_, _useBindStore_ or _useStoreSlice_.
 +} ;
 ```
 
-### Reuse v5 tests with v6 actions
+#### Reuse v5 tests with v6 actions
 
 ```diff
 - import { testSyncAction, testAsyncAction } from 'state-decorator';
@@ -1720,7 +1919,7 @@ Choose one of _useLocalStore_, _useStore_, _useBindStore_ or _useStoreSlice_.
 + import { testV6SyncAction, testV6AsyncAction } from 'state-decorator/v5_test';
 ```
 
-## Step 3 (optional): Migrate tests
+### Step 3 (optional): Migrate tests
 
 🎊 Congratulations! 🎊
 
@@ -1768,34 +1967,27 @@ You can add this snippet to quickly create a stateful functional component using
       "import React from 'react';",
       "import { useStore, StoreActions, LoadingProps } from 'state-decorator';",
       "",
-      "export type $1Props = {};",
-      "",
-      "export type $1State = {};",
+      "export type Props = {};",
       "",
-      "export type $1Actions = {};",
+      "export type State = {};",
       "",
-      "type Props = $1Props;",
-      "type State = $1State;",
-      "type Actions = $1Actions;",
+      "export type Actions = {};",
       "",
       "type ViewProps = Props & Actions & State & Pick<LoadingProps<Actions>, 'loadingMap'>;",
       "",
-      "export function getInitialState(p:$1Props): State {",
-      "return {};",
+      "export const storeConfig: StoreConfig<State, Actions, Props> = {",
+      "  getInitialState: (p:$1Props) => ({",
+      "  }),",
+      "  actions: {",
+      "  }",
       "};",
       "",
       "export function $1View(p: ViewProps) {",
       "  return (<div>[$1View]</div>);",
       "}",
       "",
-      "export const actions$1: StoreActions<State, Actions, Props> = {};",
-      "",
-      "export function onMount(actions:$1Actions) {}",
-      "",
-      "const store = createStore(getInitialState, actions$1, { onMount });",
-      "",
       "export default React.memo(function $1(p: $1Props) {",
-      "  const { state:s, actions:a, loadingMap } = useStore(store, p);",
+      "  const { state:s, actions:a, loadingMap } = useLocalStore(config, p);",
       "  return <$1View {...p} {...s} {...a} loadingMap={loadingMap} />;",
       "});"
     ],