react-hooks-global-state - npm Package Compare versions

Comparing version 0.0.5 to 0.1.0

CHANGELOG.md

@@ -5,2 +5,6 @@ # Change Log
 
+## [0.1.0] - 2018-11-07
+### Changed
+- API changed to useGlobalState/setGlobalState
+
 ## [0.0.5] - 2018-11-06
@@ -7,0 +11,0 @@ ### Changed

examples/01_minimal/main.js

@@ -12,10 +12,6 @@ /* eslint-env browser */
 };
-const { stateItemHooks } = createGlobalState(initialState);
-const {
-  counter: useGlobalStateCounter,
-  text: useGlobalStateText,
-} = stateItemHooks;
+const { useGlobalState } = createGlobalState(initialState);
 
 const Counter = () => {
-  const [value, update] = useGlobalStateCounter();
+  const [value, update] = useGlobalState('counter');
   return (
@@ -34,3 +30,3 @@ <div>
 const TextBox = () => {
-  const [value, update] = useGlobalStateText();
+  const [value, update] = useGlobalState('text');
   return (
@@ -37,0 +33,0 @@ <div>

examples/02_typescript/state.ts

 import { createGlobalState } from '../../src/index';
 
-const { stateItemHooks } = createGlobalState({
+const { useGlobalState } = createGlobalState({
   counter: 0,
@@ -12,5 +12,2 @@ person: {
 
-export const {
-  counter: useGlobalStateCounter,
-  person: useGlobalStatePerson,
-} = stateItemHooks;
+export { useGlobalState };

examples/03_actions/state.ts

 import { createGlobalState } from '../../src/index';
 
-const { stateItemHooks, stateItemUpdaters } = createGlobalState({
+const { setGlobalState, useGlobalState } = createGlobalState({
   counter: 0,
@@ -12,30 +12,22 @@ person: {
 
-export const {
-  counter: useGlobalStateCounter,
-  person: useGlobalStatePerson,
-} = stateItemHooks;
-
 export const countUp = () => {
-  const update = stateItemUpdaters.counter;
-  update(v => v + 1);
+  setGlobalState('counter', v => v + 1);
 };
 
 export const countDown = () => {
-  const update = stateItemUpdaters.counter;
-  update(v => v - 1);
+  setGlobalState('counter', v => v - 1);
 };
 
 export const setPersonFirstName = (firstName: string) => {
-  const update = stateItemUpdaters.person;
-  update(v => ({ ...v, firstName }));
+  setGlobalState('person', v => ({ ...v, firstName }));
 };
 
 export const setPersonLastName = (lastName: string) => {
-  const update = stateItemUpdaters.person;
-  update(v => ({ ...v, lastName }));
+  setGlobalState('person', v => ({ ...v, lastName }));
 };
 
 export const setPersonAge = (age: number) => {
-  const update = stateItemUpdaters.person;
-  update(v => ({ ...v, age }));
+  setGlobalState('person', v => ({ ...v, age }));
 };
+
+export { useGlobalState };

examples/04_fetch/state.ts

 import { createGlobalState } from '../../src/index';
 
-const { stateItemHooks, stateItemUpdaters } = createGlobalState({
+const { setGlobalState, useGlobalState } = createGlobalState({
   errorMessage: '',
@@ -8,15 +8,10 @@ pageTitle: '',
 
-export const {
-  errorMessage: useGlobalStateErrorMessage,
-  pageTitle: useGlobalStatePageTitle,
-} = stateItemHooks;
-
 export const setErrorMessage = (s: string) => {
-  const update = stateItemUpdaters.errorMessage;
-  update(s);
+  setGlobalState('errorMessage', s);
 };
 
 export const setPageTitle = (s: string) => {
-  const update = stateItemUpdaters.pageTitle;
-  update(s);
+  setGlobalState('pageTitle', s);
 };
+
+export { useGlobalState };

examples/05_onmount/state.ts

 import { createGlobalState } from '../../src/index';
 
-const { stateItemHooks, stateItemUpdaters } = createGlobalState({
+const { setGlobalState, useGlobalState } = createGlobalState({
   errorMessage: '',
@@ -8,15 +8,10 @@ pageTitle: '',
 
-export const {
-  errorMessage: useGlobalStateErrorMessage,
-  pageTitle: useGlobalStatePageTitle,
-} = stateItemHooks;
-
 export const setErrorMessage = (s: string) => {
-  const update = stateItemUpdaters.errorMessage;
-  update(s);
+  setGlobalState('errorMessage', s);
 };
 
 export const setPageTitle = (s: string) => {
-  const update = stateItemUpdaters.pageTitle;
-  update(s);
+  setGlobalState('pageTitle', s);
 };
+
+export { useGlobalState };

examples/06_reducer/state.ts

@@ -18,3 +18,3 @@ import { createStore } from '../../src/index';
 
-const { dispatch, stateItemHooks } = createStore(
+const { dispatch, useGlobalState } = createStore(
   (state, action: Action) => {
@@ -64,7 +64,10 @@ switch (action.type) {
 
-export const {
-  counter: useGlobalStateCounter,
-  person: useGlobalStatePerson,
-} = stateItemHooks;
+export const useGlobalStateCounter = () => {
+  return useGlobalState('counter');
+};
 
+export const useGlobalStatePerson = () => {
+  return useGlobalState('person');
+};
+
 export { dispatch };

examples/07_middleware/state.ts

@@ -79,3 +79,3 @@ import { applyMiddleware, combineReducers } from 'redux';
 
-const { dispatch, stateItemHooks } = createStore(
+const { dispatch, useGlobalState } = createStore(
   reducer,
@@ -86,7 +86,10 @@ initialState,
 
-export const {
-  counter: useGlobalStateCounter,
-  person: useGlobalStatePerson,
-} = stateItemHooks;
+export const useGlobalStateCounter = () => {
+  return useGlobalState('counter');
+};
 
+export const useGlobalStatePerson = () => {
+  return useGlobalState('person');
+};
+
 export { dispatch };

package.json

 {
   "name": "react-hooks-global-state",
   "description": "Simple global state for React by Hooks API",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "author": "Daishi Kato",
@@ -6,0 +6,0 @@ "repository": {

README.md

@@ -32,7 +32,6 @@ react-hooks-global-state
 const initialState = { counter: 0 };
-const { stateItemHooks } = createGlobalState(initialState);
-const useCounter = stateItemHooks.counter;
+const { useGlobalState } = createGlobalState(initialState);
 
 const Counter = () => {
-  const [value, update] = useCounter();
+  const [value, update] = useGlobalState('counter');
   return (
@@ -69,7 +68,6 @@ <div>
 const initialState = { counter: 0 }; // initialState is not optional.
-const { dispatch, stateItemHooks } = createStore(reducer, initialState);
-const useCounter = stateItemHooks.counter;
+const { dispatch, useGlobalState } = createStore(reducer, initialState);
 
 const Counter = () => {
-  const [value] = useCounter();
+  const [value] = useGlobalState('counter');
   return (
@@ -76,0 +74,0 @@ <div>

src/index.d.ts

@@ -1,5 +0,10 @@
-export type StateItemUpdater<T> = (f: ((v: T) => T) | T) => void;
+export type Update<T> = ((v: T) => T) | T;
 
-export type StateItemHook<T> = () => [T, StateItemUpdater<T>];
+export type SetGlobalState<S> = <N extends keyof S, T extends S[N]>(
+  name: N,
+  update: Update<T>,
+) => void;
 
+export type HookResult<T> = [T, (u: Update<T>) => void];
+
 export type Reducer<S, A> = (state: S, action: A) => S;
@@ -9,4 +14,7 @@
 
+export type UseGlobalState<S> = <N extends keyof S>(name: N) =>
+  { [K in keyof S]: N extends K ? HookResult<S[K]> : never }[keyof S];
+
 export type Store<S, A> = {
-  stateItemHooks: { [K in keyof S]: StateItemHook<S[K]> },
+  useGlobalState: UseGlobalState<S>,
   getState: () => S,
@@ -21,4 +29,4 @@ dispatch: Dispatch<A>,
 export type CreateGlobalState = <S extends {}, A extends {}>(initialState: S) => {
-  stateItemHooks: { [K in keyof S]: StateItemHook<S[K]> },
-  stateItemUpdaters: { [K in keyof S]: StateItemUpdater<S[K]> },
+  useGlobalState: UseGlobalState<S>,
+  setGlobalState: SetGlobalState<S>,
 };
@@ -25,0 +33,0 @@

src/index.js

@@ -80,4 +80,4 @@ import { useState, useEffect } from 'react';
   return {
-    stateItemUpdaters: Object.freeze(map(stateItemMap, x => x.updater)),
-    stateItemHooks: Object.freeze(map(stateItemMap, x => x.hook)),
+    useGlobalState: name => stateItemMap[name].hook(),
+    setGlobalState: (name, update) => stateItemMap[name].updater(update),
   };
@@ -92,3 +92,3 @@ };
   return {
-    stateItemHooks: Object.freeze(map(stateItemMap, x => x.hook)),
+    useGlobalState: name => stateItemMap[name].hook(),
     getState,
@@ -95,0 +95,0 @@ dispatch,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

36436

decreased by-1.14%

Lines of code

978

decreased by-1.51%

Number of lines in readme file

105

decreased by-1.87%

No dependency changes