Made-easy Minimal State Management for React App
- Based on the similar idea of Redux
- Less duplicated code
- Easy setup
- No reducers
- No extra-brainloads like map-state-to-props, map-dispatch-to-prop
- No need third-parties/wrappers/binding like Thunk/Saga/React-redux etc
- Great for small-scale app/monolithic app
Setup
Install statesman:
$ npm install -S react-statesman
How to use
In your React app:
Create a store at the entry point of the app, and assign some default props if neccessary
import App from './App'
import ReactDOM from 'react-dom'
import { statesman } from 'react-statesman'
statesman.createStore({
prop1: 'awesome',
prop2: 'not there yet pal!'
}).then(() => ReactDOM.render(<App />, document.getElementById('root')))
Then in your component, have it connected to store and pick the props you need:
import { connect } from 'react-statesman'
const Mycomponent = ({ prop1 }) => <div>{`Yay! it is sooo ${prop1}`}</div>
export default connect(Mycomponent, ['prop1'])
Props can be changed with default "dispatch" prop applied to all connectd component:
const Mycomponent2 = ({ prop2, dispatch }) => (
<button onClick={() => dispatch({ prop2: 'Good job' })}>
Click to dispatch!
</button>
)
export default connect(Mycomponent2, ['prop2'])
Hint:
dispatch function returns a Promise.resolve(), so it is now thenable
For async-dispatch and nested-props, for the time being you have to manually mix the dispatch function with the promises, because it is my intention to leave things flexible and customizable and, most importantly, unbloated.