react-hooks-global-state
Advanced tools
Comparing version 0.11.0 to 0.12.0
@@ -5,2 +5,7 @@ # Change Log | ||
## [0.12.0] - 2019-06-07 | ||
### Changed | ||
- Proper GlobalStateProvider type | ||
- add getGlobalState hook | ||
## [0.11.0] - 2019-05-25 | ||
@@ -7,0 +12,0 @@ ### Changed |
import * as React from 'react'; | ||
export type GlobalStateProviderProps = { | ||
children?: React.ReactNode; | ||
}; | ||
export type Update<T> = ((v: T) => T) | T; | ||
@@ -25,3 +21,3 @@ | ||
export type Store<S, A> = { | ||
GlobalStateProvider: React.ComponentType<GlobalStateProviderProps>; | ||
GlobalStateProvider: React.ComponentType; | ||
useGlobalState: UseGlobalState<S>; | ||
@@ -39,5 +35,6 @@ getState: () => S; | ||
export type CreateGlobalState = <S>(initialState: S) => { | ||
GlobalStateProvider: React.ComponentType<GlobalStateProviderProps>; | ||
GlobalStateProvider: React.ComponentType; | ||
useGlobalState: UseGlobalState<S>; | ||
setGlobalState: SetGlobalState<S>; | ||
getGlobalState: <N extends keyof S>(name: N) => S[N]; | ||
}; | ||
@@ -44,0 +41,0 @@ |
@@ -50,3 +50,3 @@ "use strict"; | ||
var keys = Object.keys(initialState); | ||
var globalState = initialState; | ||
var wholeGlobalState = initialState; | ||
var listener = null; | ||
@@ -78,6 +78,6 @@ | ||
// probably state was saved by react-hot-loader, so restore it | ||
globalState = state; | ||
} else if (state !== globalState) { | ||
// globalState was updated during initialization | ||
setState(globalState); | ||
wholeGlobalState = state; | ||
} else if (state !== wholeGlobalState) { | ||
// wholeGlobalState was updated during initialization | ||
setState(wholeGlobalState); | ||
} | ||
@@ -98,6 +98,6 @@ | ||
var setGlobalState = function setGlobalState(name, update) { | ||
globalState = _objectSpread({}, globalState, _defineProperty({}, name, updateValue(globalState[name], update))); | ||
wholeGlobalState = _objectSpread({}, wholeGlobalState, _defineProperty({}, name, updateValue(wholeGlobalState[name], update))); | ||
if (listener) { | ||
listener(globalState); | ||
listener(wholeGlobalState); | ||
} | ||
@@ -116,11 +116,22 @@ }; | ||
var getState = function getState() { | ||
return globalState; | ||
var getGlobalState = function getGlobalState(name) { | ||
var ReactCurrentDispatcher = _react.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher; | ||
var dispatcher = ReactCurrentDispatcher.current; | ||
if (dispatcher) { | ||
throw new Error('getGlobalState should not be used in render. Consider useGlobalState.'); | ||
} | ||
return wholeGlobalState[name]; | ||
}; | ||
var setState = function setState(state) { | ||
globalState = state; | ||
var getWholeGlobalState = function getWholeGlobalState() { | ||
return wholeGlobalState; | ||
}; | ||
var setWholeGlobalState = function setWholeGlobalState(state) { | ||
wholeGlobalState = state; | ||
if (listener) { | ||
listener(globalState); | ||
listener(wholeGlobalState); | ||
} | ||
@@ -133,4 +144,5 @@ }; | ||
useGlobalState: useGlobalState, | ||
getState: getState, | ||
setState: setState | ||
getGlobalState: getGlobalState, | ||
getWholeGlobalState: getWholeGlobalState, | ||
setWholeGlobalState: setWholeGlobalState | ||
}; | ||
@@ -144,3 +156,4 @@ }; // export functions | ||
useGlobalState = _createGlobalStateCom.useGlobalState, | ||
setGlobalState = _createGlobalStateCom.setGlobalState; | ||
setGlobalState = _createGlobalStateCom.setGlobalState, | ||
getGlobalState = _createGlobalStateCom.getGlobalState; | ||
@@ -150,3 +163,4 @@ return { | ||
useGlobalState: useGlobalState, | ||
setGlobalState: setGlobalState | ||
setGlobalState: setGlobalState, | ||
getGlobalState: getGlobalState | ||
}; | ||
@@ -166,9 +180,9 @@ }; | ||
useGlobalState = _createGlobalStateCom2.useGlobalState, | ||
getState = _createGlobalStateCom2.getState, | ||
setState = _createGlobalStateCom2.setState; | ||
getWholeGlobalState = _createGlobalStateCom2.getWholeGlobalState, | ||
setWholeGlobalState = _createGlobalStateCom2.setWholeGlobalState; | ||
var dispatch = function dispatch(action) { | ||
var oldState = getState(); | ||
var oldState = getWholeGlobalState(); | ||
var newState = reducer(oldState, action); | ||
setState(newState); | ||
setWholeGlobalState(newState); | ||
return action; | ||
@@ -180,4 +194,4 @@ }; | ||
useGlobalState: useGlobalState, | ||
getState: getState, | ||
setState: setState, | ||
getState: getWholeGlobalState, | ||
setState: setWholeGlobalState, | ||
// for devtools.js | ||
@@ -184,0 +198,0 @@ dispatch: dispatch |
{ | ||
"name": "react-hooks-global-state", | ||
"description": "Simple global state for React with Hooks API", | ||
"version": "0.11.0", | ||
"version": "0.12.0", | ||
"author": "Daishi Kato", | ||
@@ -30,3 +30,2 @@ "repository": { | ||
"examples:middleware": "DIR=07_middleware webpack-dev-server", | ||
"examples:thunk": "DIR=08_thunk webpack-dev-server", | ||
"examples:comparison": "DIR=09_comparison webpack-dev-server", | ||
@@ -36,3 +35,4 @@ "examples:immer": "DIR=10_immer webpack-dev-server", | ||
"examples:effect": "DIR=12_effect webpack-dev-server", | ||
"examples:persistence": "DIR=13_persistence webpack-dev-server" | ||
"examples:persistence": "DIR=13_persistence webpack-dev-server", | ||
"examples:hotloader": "DIR=14_hotloader webpack-dev-server" | ||
}, | ||
@@ -72,2 +72,3 @@ "keywords": [ | ||
"react-dom": "^16.8.6", | ||
"react-hot-loader": "^4.9.0", | ||
"react-testing-library": "^7.0.1", | ||
@@ -74,0 +75,0 @@ "redux": "^4.0.1", |
@@ -136,2 +136,3 @@ # react-hooks-global-state | ||
- [React Hooks Tutorial on pure useReducer + useContext for global state like Redux and comparison with react-hooks-global-state](https://blog.axlight.com/posts/react-hooks-tutorial-for-pure-usereducer-usecontext-for-global-state-like-redux-and-comparison/) | ||
- [Four patterns for global state with React hooks: Context or Redux](https://blog.axlight.com/posts/four-patterns-for-global-state-with-react-hooks-context-or-redux/) | ||
@@ -138,0 +139,0 @@ ## Community Wiki |
import * as React from 'react'; | ||
export type GlobalStateProviderProps = { | ||
children?: React.ReactNode; | ||
}; | ||
export type Update<T> = ((v: T) => T) | T; | ||
@@ -25,3 +21,3 @@ | ||
export type Store<S, A> = { | ||
GlobalStateProvider: React.ComponentType<GlobalStateProviderProps>; | ||
GlobalStateProvider: React.ComponentType; | ||
useGlobalState: UseGlobalState<S>; | ||
@@ -39,5 +35,6 @@ getState: () => S; | ||
export type CreateGlobalState = <S>(initialState: S) => { | ||
GlobalStateProvider: React.ComponentType<GlobalStateProviderProps>; | ||
GlobalStateProvider: React.ComponentType; | ||
useGlobalState: UseGlobalState<S>; | ||
setGlobalState: SetGlobalState<S>; | ||
getGlobalState: <N extends keyof S>(name: N) => S[N]; | ||
}; | ||
@@ -44,0 +41,0 @@ |
@@ -35,3 +35,3 @@ import { | ||
const keys = Object.keys(initialState); | ||
let globalState = initialState; | ||
let wholeGlobalState = initialState; | ||
let listener = null; | ||
@@ -56,6 +56,6 @@ | ||
// probably state was saved by react-hot-loader, so restore it | ||
globalState = state; | ||
} else if (state !== globalState) { | ||
// globalState was updated during initialization | ||
setState(globalState); | ||
wholeGlobalState = state; | ||
} else if (state !== wholeGlobalState) { | ||
// wholeGlobalState was updated during initialization | ||
setState(wholeGlobalState); | ||
} | ||
@@ -72,8 +72,8 @@ const cleanup = () => { | ||
const setGlobalState = (name, update) => { | ||
globalState = { | ||
...globalState, | ||
[name]: updateValue(globalState[name], update), | ||
wholeGlobalState = { | ||
...wholeGlobalState, | ||
[name]: updateValue(wholeGlobalState[name], update), | ||
}; | ||
if (listener) { | ||
listener(globalState); | ||
listener(wholeGlobalState); | ||
} | ||
@@ -90,8 +90,17 @@ }; | ||
const getState = () => globalState; | ||
const getGlobalState = (name) => { | ||
const { ReactCurrentDispatcher } = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; | ||
const dispatcher = ReactCurrentDispatcher.current; | ||
if (dispatcher) { | ||
throw new Error('getGlobalState should not be used in render. Consider useGlobalState.'); | ||
} | ||
return wholeGlobalState[name]; | ||
}; | ||
const setState = (state) => { | ||
globalState = state; | ||
const getWholeGlobalState = () => wholeGlobalState; | ||
const setWholeGlobalState = (state) => { | ||
wholeGlobalState = state; | ||
if (listener) { | ||
listener(globalState); | ||
listener(wholeGlobalState); | ||
} | ||
@@ -104,4 +113,5 @@ }; | ||
useGlobalState, | ||
getState, | ||
setState, | ||
getGlobalState, | ||
getWholeGlobalState, | ||
setWholeGlobalState, | ||
}; | ||
@@ -117,2 +127,3 @@ }; | ||
setGlobalState, | ||
getGlobalState, | ||
} = createGlobalStateCommon(initialState); | ||
@@ -123,2 +134,3 @@ return { | ||
setGlobalState, | ||
getGlobalState, | ||
}; | ||
@@ -133,9 +145,9 @@ }; | ||
useGlobalState, | ||
getState, | ||
setState, | ||
getWholeGlobalState, | ||
setWholeGlobalState, | ||
} = createGlobalStateCommon(initialState); | ||
const dispatch = (action) => { | ||
const oldState = getState(); | ||
const oldState = getWholeGlobalState(); | ||
const newState = reducer(oldState, action); | ||
setState(newState); | ||
setWholeGlobalState(newState); | ||
return action; | ||
@@ -146,6 +158,6 @@ }; | ||
useGlobalState, | ||
getState, | ||
setState, // for devtools.js | ||
getState: getWholeGlobalState, | ||
setState: setWholeGlobalState, // for devtools.js | ||
dispatch, | ||
}; | ||
}; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
32213
523
142
32