statiny v0.2.0

Out-of-the-box State Manager for React App

State Mangement for React made easy.

• 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 statiny:

$ npm install -S statiny

How to use

In your React app: 1. 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 { statiny } from 'statiny'

statiny.createStore({
  prop1: 'awesome',
  prop2: 'not there yet pal!'
}).then(() => ReactDOM.render(<App />, document.getElementById('root')))

2. Then in your component, have it connected to store and pick the props you need:

import { connect } from 'statiny
const mycomponent = ({ prop1 }) => <div>{`Yay! it is sooo ${prop1}`}</div>

export default connect(mycomponent, ['prop1'])

3. 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])

For async-dispatch and nested-props, well, if I ever feel like doing it...