Skip to content

sljavi/simple-react-store

Repository files navigation

Build Status Coverage Status

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 Drawing Drawing
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
enter image description here

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)

About

A simplified redux store for react

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published