feat: wip

Author: joaomantovani

playground/src/ExampleContext/ExampleContext.tsx

@@ -17,12 +17,10 @@ export const ExampleContext = createContext<ExampleProviderInterface>({
 });
 
 const ExampleProvider: React.FC = ({ children }) => {
-  const [stateExample, dispatchExample] = useLocalStorageReducer(
-    "localStorage-key",
-    Reducer,
-    exampleInitialState,
-    60 * 60
-  );
+  const [stateExample, dispatchExample] = useLocalStorageReducer<
+    ExampleContextInterface,
+    ExampleAction
+  >("localStorage-key", Reducer, exampleInitialState, 60 * 60);
 
   const globals = {
     stateExample,

playground/src/ExampleContext/ExampleReducer.ts

@@ -5,7 +5,7 @@ import {
 } from "./ExampleInterface";
 import { updateStateAction } from "./actions/updateStateAction";
 
-function updateStateReducer(
+function ExampleReducer(
   state: ExampleContextInterface,
   action: ExampleAction
 ): ExampleContextInterface {
@@ -18,4 +18,4 @@ function updateStateReducer(
   }
 }
 
-export default updateStateReducer;
+export default ExampleReducer;

playground/src/ExampleContext/actions/updateStateAction.test.ts

@@ -9,7 +9,7 @@ describe("File: ExampleContext", () => {
       scenario,
     ]);
 
-    it.each(eachArr)("Scenario: %s ", async (_, scenario) => {
+    it.each(eachArr)("Scenario: %s", async (_, scenario) => {
       if (typeof scenario === "string") return;
 
       const result = updateStateAction(scenario.state, {

playground/src/component-lib/index.js

@@ -11,8 +11,9 @@ function useLocalStorageReducer(key, reducer, initialState, expire) {
         var expiredStorage = new ExpiredStorage();
         // Get from local storage by key
         var item = expiredStorage.getItem(key);
+        var parsedInitialValue = JSON.stringify(initialState);
         // Parse stored json or if none return initialValue
-        return item ? JSON.parse(item) : JSON.parse(initialState);
+        return item ? JSON.parse(item) : JSON.parse(parsedInitialValue);
       } catch (error) {
         // If error also return initialValue
         console.error(error);

playground/src/component-lib/useLocalStorageReducer/useLocalStorageReducer.d.ts

@@ -1,11 +1,11 @@
-import { Reducer, ReducerState, Dispatch, ReducerAction } from "react";
-export declare function useLocalStorageReducer<I>(
+import React, { Reducer, ReducerState } from "react";
+export declare function useLocalStorageReducer<INTERFACE, ACTION>(
   key: string,
-  reducer: Reducer<any, any>,
-  initialState: I,
+  reducer: Reducer<INTERFACE, React.Dispatch<ACTION>>,
+  initialState: INTERFACE,
   expire?: number | boolean
 ): [
-  ReducerState<Reducer<any, any>>,
-  Dispatch<ReducerAction<Reducer<any, any>>>
+  ReducerState<Reducer<INTERFACE, ACTION>>,
+  React.Dispatch<React.Dispatch<ACTION>>
 ];
 export default useLocalStorageReducer;

src/useLocalStorageReducer/useLocalStorageReducer.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   useEffect,
   useReducer,
   Reducer,
@@ -8,15 +8,12 @@ import {
 } from "react";
 import ExpiredStorage from "expired-storage";
 
-export function useLocalStorageReducer<I>(
+export function useLocalStorageReducer<INTERFACE, ACTION>(
   key: string,
-  reducer: Reducer<unknown, unknown>,
-  initialState: I,
+  reducer: Reducer<INTERFACE, React.Dispatch<ACTION>>,
+  initialState: INTERFACE,
   expire: number | boolean = 60 * 30
-): [
-  ReducerState<Reducer<unknown, unknown>>,
-  Dispatch<ReducerAction<Reducer<unknown, unknown>>>
-] {
+): [ReducerState<R>, Dispatch<ReducerAction<R>>] {
   const [state, dispatch] = useReducer(
     reducer,
     initialState,