redext

    0.0.7 • Public • Published

    redext

    A simple global store based on React Context and Hooks

    Installation

    npm install redext
    or
    yarn add redext

    Use It

    // store/models/common.js
    import React from 'react';
    
    export default {
      state: {
         theme: 'white',
         showModal: false
      },
      effects: (dispatch) => {
         return {
           onOpenModal(modalState) {
             this.updateState({
               showModal: true,
               modalState
             });
             
             // or
             dispatch({
               type: 'common/updateState',
               payload: {
                 showModal: true,
                 modalState
               }
             });
             
             // or
             dispatch.common.updateState({
               showModal: true,
               modalState
             })
           }
         }
      },
      reducers: {
          updateState: (state, payload) => {
            return {
              ...state,
              ...payload
            };
          },
          changeTheme: (state) => {
            return {
              ...state,
              theme: state.theme === 'white' ? 'dark' : 'white'
            };
          }
      }
    }
    // store/models/index.js
    import common from './common';
    import auth from './auth';
    
    export default {
      common,
      auth
    }
    // store/index.js
    import { Provider, connect, init, models } from 'redext';
    
    import models from './models';
    
    export { Provider, connect, init, models }
    // client/index.js
    import { Provider, init, models } from './store';
    
    const store = init({
      models
    });
    
    const App = ({ children, initialValue = {} }) => {
      return (
        <Provider store={store} initialValue={initialValue}>
           {children}
        </Provider>
      )
    }
    
    export default App
    // client/pages/movie.js
    import { connect, memoize, useDeepEffect } from 'redext';
    
    const Movie = ({ dispatch, theme, onOpenModal }) => {
      useDeepEffect(() => {
      }, [array, object]);
      
      return (
        <div>
          {theme}
        </div>
      )
    }
    
    const mapState = ({ common: { theme } }) => ({
      theme
    });
    
    const mapDispatch = ({ common: { onOpenModal } }) => ({
      onOpenModal
    });
    
    // options
    const memoPropsAreEqual = (prevProps, nextProps) => {
      if (nextProps.visible !== prevProps.visible) {
        return false
      }
    
      return true
    };
    
    export default connect(mapState, mapDispatch)(memoize(Movie, memoPropsAreEqual))

    Install

    npm i redext

    DownloadsWeekly Downloads

    46

    Version

    0.0.7

    License

    none

    Unpacked Size

    52.8 kB

    Total Files

    29

    Last publish

    Collaborators

    • dotcody