0.7.1 • Published 4 years ago
simple-redux-js v0.7.1
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
Install the npm package.
npm i simple-redux-js
Load the provider in App.js.
const App = () => ( <SimpleProvider initialState={{ token: 'default_token' }}> <Child> </SimpleProvider> )
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.