https://github.com/hacknlove/reduxplus
https://github.com/hacknlove/reduxplus
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hacknlove/reduxplus
- Owner: hacknlove
- License: isc
- Created: 2019-08-05T06:29:35.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T07:46:02.000Z (over 3 years ago)
- Last Synced: 2025-08-21T04:38:01.205Z (10 months ago)
- Language: JavaScript
- Size: 443 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# reduxplus
Decoupled redux, for react functional components.
## Example
```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import store from 'reduxplus'
store.hydrate({
worldName: 'world'
foo: {
bar: {
buz: 42
}
}
})
store.setReducer((state, action) => {
if (action.type !== 'setWorld') {
return state
}
return {
...state,
worldName: action.worldName
}
})
function Example () {
const worldName = store.useRedux('worldName')
const theMeaningOfLife = store.useRedux('foo.bar.buz')
return (
Hello {world}
The meaning of life is {theMeaningOfLife}
store.dispatch({
type: 'setWorld',
worldName: 'Earth'
})}>World's name
)
}
ReactDOM.render(
,
document.querySelector('#root')
)
```
## API
### `store`
The redux store
### `setReducer(reducer)`
Adds a new reducer to the store
### `setMiddleware(middleware)`
Adds a new middleware to the store
### `useRedux(key?)`
`key` can be dot-composed
```javascript
const data = useRedux() // returns store.getState() and actualizes the component when data changes
const foobar = useRedux('foo.bar') // returns store.getState().foo.bar, and actualizes the component when that value changes
```
### hydrate(state, replace = false)
Set the store value
```javascript
// store.getValue() -> {foo: 'bar'}
hydrate({
buz: 42
})
// store.getValue() -> {foo: 'bar', buz: 42}
hydrate({import { store, setReducer, setMiddleware, useRedux, hydrate } from 'reduxplus'
foo: 'foooo'
})
// store.getValue() -> {foo: 'foooo', buz: 42}
hydrate({
bar: 40
}, true)
// store.getValue() -> {bar: 42}
```
## subStores
See [@hacknlove/substore](https://github.com/hacknlove/substore)
## test
```bash
git clone https://github.com/hacknlove/reduxplus.git
cd reduxplus
npm i
npm test
```