Simple React Store

A simplified redux store for react

Install

npm install --save simple-react-store

Differences with Redux

Simple React Store is a simplified version of Redux

Features	Simple React Store	Redux
Data Flow
Store: Single source of true	✅	✅
Unidirectional data flow	✅	✅
Read the state	✅	✅
State updates	Directly setting the new state	Via reducers and actions
Action Dispatching	No needed	Required
Action Types	Optional when updating state	Required
Immutable state updates	✅	❌
Reducers	No needed	Required
Async Actions	Using plain simple js calls	Using some library (i.e. redux-thunk)
State change subscriptions	✅	✅
Connect React components with the store	Unified map to props callback	Map state and map dispatch to props callbacks
Redux Dev Tool Integration	Built in	Using a middleware
Middlewares	❌	✅

Usage

Create a Store

new Store(initialState)

Returns a new Store with the initial state set. If the initial state is not provided defaults to an empty object

Arguments

initialState (any)[{}]: The initial state you want to set. Defaults to empty object.

Returns

(Store instance): A new Store with the initial state set

Example

import { Store } from 'simple-react-store'
 
// Create store with empty state
const aStore = new Store()
 
// Create store with initial state
const anotherStore = new Store({
  name: 'John Doe',
  user: 'john.dow'
})

Get state

aStore.getState()

Returns the saved state

Returns

(any): The previously saved state. Could be any type of value.

Example

import { Store } from 'simple-react-store'
 
const aStore = new Store({
  name: 'John Doe',
  user: 'john.dow'
})
 
console.log(aStore.getState())
// {
//  name: 'John Doe',
//  user: 'john.dow'
// }

Update state

aStore.setState(someState, actionName = '')

Saves the new state into the store. Remember keep your states immutable.

Arguments

someState (any): The state you want to save.

actionName (string)['']: Optionally you can identified the state change with an action name. The name will be shared with all the state change subscribers and redux dev tools.

Example

import { Store } from 'simple-react-store'
 
const aStore = new Store()
 
const newState = {
  name: 'John Doe',
  user: 'john.dow',
  nationality: 'argentinian'
}
aStore.setState(newState, 'Set user nationality')
 
console.log(aStore.getState())
// {
//  name: 'John Doe',
//  user: 'john.dow'
//  nationality: 'argentinian'
// }

aStore.updateState(stateProducer, actionName = '')

Produce and save a new immutable state based on the current state.

Arguments

stateProducer (function): A function that will received the next state as a parameter and can be mutated. Simple react store will use immer to generate the immutable state.

actionName (string)['']: Optionally you can identified the state change with an action name. The name will be shared with all the state change subscribers and redux dev tools.

Example

import { Store } from 'simple-react-store'
 
const aStore = new Store({
  name: 'John Doe',
  user: 'john.dow'
})
 
aStore.updatedState((nextState) => {
  nextState.nationality = 'argentinian'
})
 
console.log(aStore.getState())
// {
//  name: 'John Doe',
//  user: 'john.dow'
//  nationality: 'argentinian'
// }

Listen for state changes

aStore.onUpdate((state, actionName) => { })

Subscribes for state changes

Arguments

callback (function): The function that will be executed any time there is a new state.

Callback arguments

state (any): The saved state.

actionName (string): Action name set when updated the state

Example

import { Store } from 'simple-react-store'
 
const aStore = new Store()
const newState = {
  name: 'John Doe',
  user: 'john.dow'
}
 
aStore.onUpdate((state, actionName) => {
  // do something
})
 
aStore.setState(newState, 'Set user session details')

Connect React components with the Store

aStore.connect(resolvePropsCallback)(Component)

Updates the props of a react component every time there is a new state

Arguments

resolvePropsCallback (function(state, [ownProps])): The function that will be executed any time there is a new state. It has to return an object of props.

Component (React Component): The react component that will receive the props resolved by resolvePropsCallback

Returns

(React Component): A hight order component that will update the given component any time there are new props resolved by resolvePropsCallback

Example

import { Store } from 'simple-react-store'
import App from './components/App.js'
 
const aStore = new Store({
  name: 'John Doe',
  user: 'john.dow'
})
const resolveProps = (state, ownProps) => {
  return {
    title: 'I love simple-react-store',
    user: state.user
  }
}
const Container = aStore.connect(resolveProps)(App)
// <App
//   title='I love simple-react-store'
//   user='John Doe'
// />

Log state changes into Redux Dev Tools

connectDevTools(aStore)

Connect a store to redux dev tools if available. Any state saved into the store will be logged as long with the given action name

Arguments

aStore (Store instance): The created Store instance

Example

import { Store, connectDevTools } from 'simple-react-store'
 
const aStore = new Store()
connectDevTools(aStore)