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
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)