Merge pull request #365 from y0na24/feat/createStoreUpgrade

Корректный createStore с сохранением неизменяемого состояния, если не примитив 🧊

Author: debabin

packages/core/src/bundle/helpers/createStore/createStore.js

@@ -1,4 +1,10 @@
 import { useSyncExternalStore } from 'react';
+function isStateCreator(fn) {
+  return typeof fn === 'function';
+}
+function isActionFunction(fn) {
+  return typeof fn === 'function';
+}
 /**
  * @name createStore
  * @description - Creates a store with state management capabilities
@@ -18,30 +24,34 @@ export const createStore = (createState) => {
   let state;
   const listeners = new Set();
   const setState = (action) => {
-    const nextState = typeof action === 'function' ? action(state) : action;
+    const nextState = isActionFunction(action) ? action(state) : action;
     if (!Object.is(nextState, state)) {
       const prevState = state;
-      state = nextState;
+      state =
+        typeof nextState !== 'object' || nextState === null
+          ? nextState
+          : Object.assign({}, state, nextState);
       listeners.forEach((listener) => listener(state, prevState));
     }
   };
-  const getState = () => state;
-  const getInitialState = () => state;
   const subscribe = (listener) => {
     listeners.add(listener);
     return () => listeners.delete(listener);
   };
-  if (typeof createState === 'function') {
+  const getState = () => state;
+  const getInitialState = () => state;
+  if (isStateCreator(createState)) {
     state = createState(setState, getState);
   } else {
     state = createState;
   }
-  const useStore = (selector) =>
-    useSyncExternalStore(
+  function useStore(selector) {
+    return useSyncExternalStore(
       subscribe,
       () => (selector ? selector(getState()) : getState()),
       () => (selector ? selector(getInitialState()) : getInitialState())
     );
+  }
   return {
     set: setState,
     get: getState,

packages/core/src/helpers/createContext/createContext.demo.tsx

@@ -6,7 +6,7 @@ const profileContext = createContext(DEFAULT_PROFILE);
 const App = () => {
   const name = profileContext.useSelect((state) => state.name);
   const age = profileContext.useSelect((state) => state.age);
-  const profile = profileContext.useSelect()!;
+  const profile = profileContext.useSelect();
 
   const nameField = useField({
     initialValue: DEFAULT_PROFILE.name

packages/core/src/helpers/createStore/createStore.ts

@@ -1,11 +1,22 @@
 import { useSyncExternalStore } from 'react';
 
-type SetStateAction<Value> = ((prev: Value) => Value) | Value;
+type SetStateAction<Value> = ((prev: Value) => Partial<Value>) | Partial<Value>;
+
+type Listener<Value> = (state: Value, prevState: Value) => void;
+
 type StateCreator<Value> = (
   set: (action: SetStateAction<Value>) => void,
   get: () => Value
 ) => Value;
 
+function isStateCreator<Value>(fn: unknown): fn is StateCreator<Value> {
+  return typeof fn === 'function';
+}
+
+function isActionFunction<Value>(fn: unknown): fn is (prev: Value) => Partial<Value> {
+  return typeof fn === 'function';
+}
+
 export interface StoreApi<Value> {
   getInitialState: () => Value;
   getState: () => Value;
@@ -29,40 +40,48 @@ export interface StoreApi<Value> {
  * }));
  */
 export const createStore = <Value>(createState: StateCreator<Value> | Value) => {
-  type Listener = (state: Value, prevState: Value) => void;
   let state: Value;
-  const listeners: Set<Listener> = new Set();
+  const listeners: Set<Listener<Value>> = new Set();
 
-  const setState = (action: SetStateAction<Value>) => {
-    const nextState =
-      typeof action === 'function' ? (action as (state: Value) => Value)(state) : action;
+  const setState: StoreApi<Value>['setState'] = (action: SetStateAction<Value>) => {
+    const nextState = isActionFunction<Value>(action) ? action(state) : action;
 
     if (!Object.is(nextState, state)) {
       const prevState = state;
-      state = nextState;
+      state =
+        typeof nextState !== 'object' || nextState === null
+          ? nextState
+          : Object.assign({}, state, nextState);
+
       listeners.forEach((listener) => listener(state, prevState));
     }
   };
 
-  const getState = () => state;
-  const getInitialState = () => state;
-
-  const subscribe = (listener: Listener) => {
+  const subscribe = (listener: Listener<Value>) => {
     listeners.add(listener);
+
     return () => listeners.delete(listener);
   };
-  if (typeof createState === 'function') {
-    state = (createState as StateCreator<Value>)(setState, getState);
+
+  const getState = () => state;
+  const getInitialState = () => state;
+
+  if (isStateCreator<Value>(createState)) {
+    state = createState(setState, getState);
   } else {
     state = createState;
   }
 
-  const useStore = <Selected>(selector?: (state: Value) => Selected) =>
-    useSyncExternalStore(
+
+  function useStore(): Value;
+  function useStore<Selected>(selector: (state: Value) => Selected): Selected;
+  function useStore<Selected>(selector?: (state: Value) => Selected): Selected | Value {
+    return useSyncExternalStore(
       subscribe,
       () => (selector ? selector(getState()) : getState()),
       () => (selector ? selector(getInitialState()) : getInitialState())
     );
+  }
 
   return {
     set: setState,