react-context-hooks-store

A simple global store based on React Context and Hooks

Installation

1npm install react-context-hooks-store
2or
3yarn add react-context-hooks-store

Use It

1// reducers/common.js
2let initialState = {
3  theme: 'white'
4};
5
6const reducer = (state = initialState, action) => {
7  const { type, payload } = action;
8
9  switch (type) {
10    case `common/${constants.ACTION_TYPE.UPDATE_STATE}`:
11      return {
12        ...state,
13        ...payload
14      };
15      
16    default:
17      return state;
18  }
19};
20
21export default reducer

1// store.js
2import { Provider, connect, memoize, useStore, useDispatch, useDeepEffect, combineReducers } from 'react-context-hooks-store';
3
4import common from './reducers/common';
5import global from './reducers/global';
6
7const rootReducer = combineReducers({
8  global,
9  common
10});
11
12export { Provider, connect, memoize, rootReducer, useStore, useDispatch, useDeepEffect, combineReducers }

1// src/index.js
2import { Provider, rootReducer } from './store.js';
3
4const initialValue = {}
5
6<Provider rootReducer={rootReducer} initialValue={initialValue}>
7  <App />
8</Provider>

1// src/pages/movie.js
2import { connect, memoize, useDeepEffect } from './store.js';
3
4const Movie = ({ theme }) => {
5  useDeepEffect(() => {
6  }, [array, object]);
7  
8  return (
9    <div>{theme}</div>
10  )
11}
12
13const mapState = ({ common: { theme } }) => ({
14  theme
15});
16
17// options
18const memoPropsAreEqual = (prevProps, nextProps) => {
19  if (nextProps.visible !== prevProps.visible) {
20    return false
21  }
22
23  return true
24};
25
26export default connect(mapState)(memoize(Movie, memoPropsAreEqual))