Nonlinear Programming Methods

    reax-store
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    Reax-store

    Tiny (~700b) react-redux add-on for state management similar to Vuex

    minzipped size npm-package

    CODE SANDBOX DEMO

    I really love Vuex and find it the most convenient library for managing application state. This repository is a lightweight add-on over react-redux that allows you to create and interact with a store like you do in Vue + Vuex.

    Important points

    • It is not 100% Vuex compatible. Please do not open issues related to API mismatch, or the fact that some things are not quite in the places where you expect.
    • In this implementation there are no "actions", since I believe that they should not be in the store :)
    • This library is primarily aimed at components in a functional style, there are no special solutions for class components.

    Getting started

    Reax-store does not include redux and react-redux, so first you need to install three packages:

    npm install redux react-redux reax-store

    Then, create a file describing your store:

    // src/store/index.js
    
    import { createReaxStore } from "reax-store";
    
    export default createReaxStore({
      state: {
          count: 0
      },
      mutations: {
          incrementCount(state, payload) {
              state.count += payload ?? 1
          }
      },
      getters: {
          getCount: state => state.count
      }
    })

    Use react-redux provider to connect Redux store to your app like this:

    // main.jsx
    // ...
    import store from "./store";
    import { Provider } from "react-redux";
    
    ReactDOM.render(
            <Provider store={store.reduxStore}>
                <App/>
            </Provider>,
            document.getElementById('root')
    )

    After that you can use Reax in your components like this:

    // App.jsx
    import store from "./store";
    
    function App() {
      // Please note: unlike Vuex, we must call 
      // the getter function, since in Reax this 
      // is just a wrapper over the react-redux 
      // useSelector hook. 
      const count = store.getters.getCount()
      
      return (
          <div>
            <p>{count}</p>
            <button onClick={() => {
              store.commit('incrementCount', 3)
            }}>
              count is: {count}
            </button>
          </div>
      )
    }

    That's it!

    Modules

    As with Vuex, you can use modules. All modules are always namespaced. Accessing getters and mutations is similar to Vuex.

    // src/store/index.js
    
    import { createReaxStore } from "reax-store";
    
    const LetterModule = {
      state: {
          text: 'a'
      },
      mutations: {
          addA(state) {
              state.text += 'a'
          }
      },
      getters: {
          getText: state => state.text
      }
    }
    
    export default createReaxStore({
      state: {
          count: 0
      },
      mutations: {
          incrementCount(state, payload) {
              state.count += payload ?? 1
          }
      },
      getters: {
          getCount: state => state.count
      },
      modules: {
          LetterModule
      }
    })
    // App.jsx
    import store from "./store";
    
    function App() {
      const count = store.getters.getCount()
      const letters = store.getters['LetterModule/getText']()
      
      return (
          <div>
            <p>{count}</p>
            <p>{text}</p>
            <button onClick={() => {
              store.commit('incrementCount', 3)
              store.commit('LetterModule/addA')
            }}>
              count is: {count}
            </button>
          </div>
      )
    }

    You can register and unregister modules dynamically using the registerModule and unregisterModule methods of the store instance.

    // src/store/index.js
    
    import { createReaxStore } from "reax-store";
    
    export const LetterModule = {
      state: {
          text: 'a'
      },
      mutations: {
          addA(state) {
              state.text += 'a'
          }
      },
      getters: {
          getText: state => state.text
      }
    }
    
    export default createReaxStore({
      state: {
          count: 0
      },
      mutations: {
          incrementCount(state, payload) {
              state.count += payload ?? 1
          }
      },
      getters: {
          getCount: state => state.count
      }
    })
    // App.jsx
    import store, { LetterModule } from "./store";
    
    store.registerModule('LetterModule', LetterModule)
    
    function App() {
      useEffect(() => {
          return () => store.unregisterModule('LetterModule')
      }, [])
        
      const count = store.getters.getCount()
      const letters = store.getters['LetterModule/getText']()
      
      return (
          <div>
            <p>{count}</p>
            <p>{text}</p>
            <button onClick={() => {
              store.commit('incrementCount', 3)
              store.commit('LetterModule/addA')
            }}>
              count is: {count}
            </button>
          </div>
      )
    }

    Accessing the native Redux store

    The Redux store is always available in the Reax store using the reduxStore key.

    TODO

    • [ ] Accessing Global Assets in modules (getters, rootState, rootGetters) for getter functions

    Install

    npm i reax-store

    DownloadsWeekly Downloads

    10

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    31.1 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar