viestate
v0.0.1
Published
A simple global store based on React Context and Hooks
Downloads
2
Maintainers
Readme
react-context-hooks-store
A simple global store based on React Context and Hooks
Installation
npm install react-context-hooks-store
or
yarn add react-context-hooks-store
Use It
// reducers/common.js
let initialState = {
theme: 'white'
};
const reducer = (state = initialState, action) => {
const { type, payload } = action;
switch (type) {
case `common/${constants.ACTION_TYPE.UPDATE_STATE}`:
return {
...state,
...payload
};
default:
return state;
}
};
export default reducer
// store.js
import { Provider, connect, memoize, useStore, useDispatch, useDeepEffect, combineReducers } from 'react-context-hooks-store';
import common from './reducers/common';
import global from './reducers/global';
const rootReducer = combineReducers({
global,
common
});
export { Provider, connect, memoize, rootReducer, useStore, useDispatch, useDeepEffect, combineReducers }
// src/index.js
import { Provider, rootReducer } from './store.js';
const initialValue = {}
<Provider rootReducer={rootReducer} initialValue={initialValue}>
<App />
</Provider>
// src/pages/movie.js
import { connect, memoize, useDeepEffect } from './store.js';
const Movie = ({ theme }) => {
useDeepEffect(() => {
}, [array, object]);
return (
<div>{theme}</div>
)
}
const mapState = ({ common: { theme } }) => ({
theme
});
// options
const memoPropsAreEqual = (prevProps, nextProps) => {
if (nextProps.visible !== prevProps.visible) {
return false
}
return true
};
export default connect(mapState)(memoize(Movie, memoPropsAreEqual))