reducere

Redux without the actions and reducers

Why

• [x] Single source of truth
• [x] State is read-only
• [x] Changes are made with pure functions
• [x] Compatible with react-redux
• [x] 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')
)