An open API service indexing awesome lists of open source software.

https://github.com/liveduo/simple-redux

A redux wrapper to get started quickly
https://github.com/liveduo/simple-redux

Last synced: 6 months ago
JSON representation

A redux wrapper to get started quickly

Awesome Lists containing this project

README

          


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.
```javascript
npm i simple-redux-js
```

2. Load the provider in App.js.

```javascript
const App = () => (



)
```

3. Access and update global state in any other component.

```javascript
const Child = () => {
const simpleDispatch = useSimpleDispatch()
return (


{useSimpleSelector('token')}
simpleDispatch('token', 'value')}>

)
}
```

## Documentation

- **useSimpleSelector** (propertyName)
Selects the property by name from the store.
``` javascript
const token = useSimpleSelector('token')
```

- **getSimpleState** (propertyName)
Selects the property by name outside of a component.
``` javascript
const token = getSimpleState('token')
```

- **getSimpleStates** ()
Selects all states of the store outside of a component.
``` javascript
const allStates = getSimpleStates()
```

- **store**
Access the store outside of a component.
``` javascript
store.subscribe(() => {
console.log('the store has been updated')
})
```

- **useSimpleDispatch** ()
Creates a dispatch method to update the store.
``` javascript
const simpleDispatch = useSimpleDispatch()
```

- **simpleDispatch** (propertyName, propertyValue)
Updates the property by name with the specified value.
``` javascript
const setToken = (token) => simpleDispatch('token', token)
```

## Full Example

```javascript
// 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 = () => (



)
ReactDom.render(, 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 (


{token}
setToken('user_token')}>

)
}
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](LICENSE).