simple-redux-js

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.