BREAKING CHANGE(@focus-js/react-connect): useGlobalState and useFocusedState return an array instead of an object.

Author: mathieueveillard

README.md

@@ -1,3 +1,5 @@
+# @focus-js/react-connect
+
 A lens-based state manager. Library/Framework agnostic. Connector for React.
 
 ## Table of Contents
@@ -49,22 +51,18 @@ const { useFocusedState } = connect<ApplicationState>({
   b: 0,
 });
 
-const lens = createLens<ApplicationState, number>({
+const a_lens = createLens<ApplicationState, number>({
   get: ({ a }) => a,
   set: (state, a) => ({ ...state, a }),
 });
 
 const CounterA: React.FunctionComponent = () => {
-  const { state, updateState } = useFocusedState(lens);
-
-  const increment = (): void => {
-    updateState((n) => n + 1);
-  };
+  const [counter, increment] = useFocusedState(a_lens);
 
   return (
     <div>
-      <div>{state}</div>
-      <button onClick={increment}>Increment</button>
+      <div>{counter}</div>
+      <button onClick={() => increment((n) => n + 1)}>Increment</button>
     </div>
   );
 };
@@ -589,9 +587,7 @@ With this setup:
 Once your lenses are defined in this centralized way, you can use them anywhere in your application to both read and update state with minimal boilerplate. For example, accessing and updating the rank of project `"project-3"` is as simple as:
 
 ```typescript
-const { state: rank, updateState: updateRank } = useFocusedState(
-  L.rank('project-3')
-);
+const [rank, updateRank] = useFocusedState(L.rank('project-3'));
 ```
 
 Here, `rank` contains the current value (`number`) and `updateRank` lets you apply reducers directly to that piece of state. For instance, incrementing the rank becomes trivial:

packages/react-connect/README.md

@@ -51,22 +51,18 @@ const { useFocusedState } = connect<ApplicationState>({
   b: 0,
 });
 
-const lens = createLens<ApplicationState, number>({
+const a_lens = createLens<ApplicationState, number>({
   get: ({ a }) => a,
   set: (state, a) => ({ ...state, a }),
 });
 
 const CounterA: React.FunctionComponent = () => {
-  const { state, updateState } = useFocusedState(lens);
-
-  const increment = (): void => {
-    updateState((n) => n + 1);
-  };
+  const [counter, increment] = useFocusedState(a_lens);
 
   return (
     <div>
-      <div>{state}</div>
-      <button onClick={increment}>Increment</button>
+      <div>{counter}</div>
+      <button onClick={() => increment((n) => n + 1)}>Increment</button>
     </div>
   );
 };
@@ -591,9 +587,7 @@ With this setup:
 Once your lenses are defined in this centralized way, you can use them anywhere in your application to both read and update state with minimal boilerplate. For example, accessing and updating the rank of project `"project-3"` is as simple as:
 
 ```typescript
-const { state: rank, updateState: updateRank } = useFocusedState(
-  L.rank('project-3')
-);
+const [rank, updateRank] = useFocusedState(L.rank('project-3'));
 ```
 
 Here, `rank` contains the current value (`number`) and `updateRank` lets you apply reducers directly to that piece of state. For instance, incrementing the rank becomes trivial:

packages/react-connect/src/lib/index.spec.tsx

@@ -12,10 +12,10 @@ describe('Without focusing', () => {
 
   test('It should allow to read the state', async () => {
     // Given
-    const { useGlobalState: useState } = connect<State>(0);
+    const { useGlobalState } = connect<State>(0);
 
     const Component: React.FunctionComponent = () => {
-      const { state, updateState } = useState();
+      const [state, updateState] = useGlobalState();
 
       const onClick = (): void => {
         updateState((state) => state + 1);
@@ -40,10 +40,10 @@ describe('Without focusing', () => {
 
   test('It should allow to update the state', async () => {
     // Given
-    const { useGlobalState: useState } = connect<State>(0);
+    const { useGlobalState } = connect<State>(0);
 
     const Component: React.FunctionComponent = () => {
-      const { state, updateState } = useState();
+      const [state, updateState] = useGlobalState();
 
       const onClick = (): void => {
         updateState((state) => state + 1);
@@ -82,13 +82,13 @@ describe('With focusing', () => {
 
   test('It should allow to read the state', async () => {
     // Given
-    const { useFocusedState: useState } = connect<State>({
+    const { useFocusedState } = connect<State>({
       value: 0,
       other: 'other',
     });
 
     const Component: React.FunctionComponent = () => {
-      const { state, updateState } = useState(lens);
+      const [state, updateState] = useFocusedState(lens);
 
       const onClick = (): void => {
         updateState((state) => state + 1);
@@ -113,13 +113,13 @@ describe('With focusing', () => {
 
   test('It should allow to update the state', async () => {
     // Given
-    const { useFocusedState: useState } = connect<State>({
+    const { useFocusedState } = connect<State>({
       value: 0,
       other: 'other',
     });
 
     const Component: React.FunctionComponent = () => {
-      const { state, updateState } = useState(lens);
+      const [state, updateState] = useFocusedState(lens);
 
       const onClick = (): void => {
         updateState((state) => state + 1);
@@ -163,10 +163,10 @@ describe('Change detection', () => {
 
   test('A should update without B to render', async () => {
     // Given
-    const { useFocusedState: useState } = connect<State>({ a: 0, b: 0 });
+    const { useFocusedState } = connect<State>({ a: 0, b: 0 });
 
     const A: React.FunctionComponent = () => {
-      const { state, updateState } = useState(aLens);
+      const [state, updateState] = useFocusedState(aLens);
 
       const onClick = (): void => {
         updateState((state) => state + 1);
@@ -185,7 +185,7 @@ describe('Change detection', () => {
     const bSpy = vi.fn();
 
     const B: React.FunctionComponent = () => {
-      const { state } = useState(bLens);
+      const [state] = useFocusedState(bLens);
 
       React.useEffect(() => {
         bSpy();

packages/react-connect/src/lib/index.ts

@@ -14,16 +14,16 @@ export const connect = <State>(initialState: State, logger: Logger = noop) => {
   const useFocusedState = <Focus = State>(lens: Lens<State, Focus>) => {
     const focusedStore = store.focus(lens);
 
-    const { subscribe, getState, select, updateState } = focusedStore;
+    const { getState, updateState, select, subscribe } = focusedStore;
 
     const state = useSyncExternalStore(subscribe, getState);
 
-    return {
-      state,
-      getSynchronousState: getState,
-      select,
+    return [
+      state, // reactive state
       updateState,
-    };
+      select,
+      getState, // synchronous state
+    ] as const;
   };
 
   const NOOP_LENS = createLens<State, State>({