react-context-hooks-store-v2

0.0.1 • Public • Published

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))

Dependents (0)

Package Sidebar

Install

npm i react-context-hooks-store-v2

Weekly Downloads

0

Version

0.0.1

License

none

Unpacked Size

34.7 kB

Total Files

34

Last publish

Collaborators

  • dotcody