Nit-Picking Magistrate

    simple-redux-js

    0.7.1 • Public • Published

    hybrids - the web components

    Simple Redux is a state management library for the layman. It is just a global store to get and update values.

    • Dead simple — One hook for receiving values and updating them.
    • Redux based — Opinionated version of Redux. Core Redux concepts still apply.
    • Plug & Play — Copy and paste the code below and you are ready to go.

    Getting Started

    1. Install the npm package.

      npm i simple-redux-js
    2. Load the provider in App.js.

      const App = () => (
        <SimpleProvider initialState={{ token: 'default_token' }}>
          <Child>
        </SimpleProvider>
      )
    3. Access and update global state in any other component.

      const Child = () => {
        const simpleDispatch = useSimpleDispatch()
        return (
          <div>
            <span>{useSimpleSelector('token')}</span>
            <button onClick={() => simpleDispatch('token', 'value')}>
          </div>
        )
      }

    Documentation

    • useSimpleSelector (propertyName) Selects the property by name from the store.
    const token = useSimpleSelector('token')
    • getSimpleState (propertyName) Selects the property by name outside of a component.
    const token = getSimpleState('token')
    • getSimpleStates () Selects all states of the store outside of a component.
    const allStates = getSimpleStates()
    • store Access the store outside of a component.
    store.subscribe(() => {
      console.log('the store has been updated')
    })
    • useSimpleDispatch () Creates a dispatch method to update the store.
      const simpleDispatch = useSimpleDispatch()
    • simpleDispatch (propertyName, propertyValue) Updates the property by name with the specified value.
      const setToken = (token) => simpleDispatch('token', token)

    Full Example

    // App.js
    import React from 'react'
    import ReactDom from 'react-dom'
     
    import { SimpleProvider } from 'simple-redux-js'
     
    import { Child } from './Child'
     
    const defaultToken = localStorage.getItem('token')
     
    const App = () => (
      <SimpleProvider initialState={{ token: defaultToken }}>
        <Child>
      </SimpleProvider>
    )
    ReactDom.render(<App/>, document.getElementById('root'))
     
    // Child.js
    import React from 'react'
     
    import { useSimpleSelector, useSimpleDispatch } from 'simple-redux-js'
     
    const Child = () => {
      const simpleDispatch = useSimpleDispatch()
      const token = useSimpleSelector('token')
      const setToken = (token) => simpleDispatch('token', token)
     
      return (
        <div>
          <span>{token}</span>
          <button onClick={() => setToken('user_token')}>
        </div>
      )
    }
    export { Child }

    Publish

    npm login
    git commit (clean repo)
    npm version patch (or minor)
    npm publish
    git push
    

    License

    simple-redux-js is released under the ISC License.

    Keywords

    none

    Install

    npm i simple-redux-js

    DownloadsWeekly Downloads

    17

    Version

    0.7.1

    License

    ISC

    Unpacked Size

    23 kB

    Total Files

    6

    Last publish

    Collaborators

    • liveduo