1.1.2 • Published 7 years ago
reducere v1.1.2
reducere
Redux without the actions and reducers
Why
- Single source of truth
- State is read-only
- Changes are made with pure functions
- Compatible with react-redux
- Less boilerplate
Install
npm install reducere
// or
yarn add reducere
Basic usage
import {createStore} from 'reducere'
const store = createStore(0)
store.subscribe(() =>
console.log(store.getState())
)
const increment = () => ({dispatch, getState, updateState}) => {
updateState((state) => state + 1))
})
const decrement = () => ({dispatch, getState, updateState}) => {
updateState((state) => state - 1))
})
store.dispatch(increment())
// 1
store.dispatch(increment())
// 2
store.dispatch(decrement())
// 1
Async
import {createStore} from 'reducere'
const store = createStore(0)
const incrementAfter1Sec = () => ({updateState}) => {
setTimeout(() => {
updateState((state) => state + 1))
}, 1000)
}
store.dispatch(incrementAfter1Sec())
const getCountFromServer = () => async ({updateState}) => {
const count = await API.getCount()
updateState(() => count)
}
store.dispatch(getCountFromServer())
Usage with react / react-native
import {createStore} from 'reducere'
import React from 'react'
import {render} from 'react-dom'
import {Provider, connect} from 'react-redux'
const store = createStore({count: 0})
const increment = () => ({dispatch, getState, updateState}) => {
updateState((state) => ({count: state + 1}))
})
const mapStateToProps = ({count}) => ({count})
const mapDispatchToProps = (dispatch) => ({
increment: () => dispatch(increment())
})
const App = connect(
mapStateToProps,
mapDispatchToProps
)(({count}) => (
<h1>Count: {count}</h1>
))
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)