State management with promise-based middleware

RECOMMEND: Use stas with immutable state and model support!

Example

store.js file:

const router = reuqire('./router');
const Store = require('stas');
const store = new Store({
  tasks: [],
});
store.use(router)

router.js file:

const Router = require('uni-router');
const router = Router();
router.all('/add-task', async (req, resp, next) => {
  const {store} = req, {text} = req.body;
  const result = await fetch('/server/add-task', {text})
  const {id} = result;
  store.setState({tasks: [...store.state.tasks, {id, text, completed: false}]})
});
router.all('/toggle-task', (req, resp, next) => {
  const {store} = req, {id} = req.body;
  const index = store.state.tasks.findIndex(t => t.id === id);
  const completed = tasks[index].completed
  store.setState({tasks: [
    ...store.state.tasks.slice(0, index),
    {...tasks[index], completed: !completed}
    ...store.state.tasks.slice(index+1),
  ]})
});

TodoListPage.js file:

const {PureComponent, PropTypes} = require('react');
const {connect} = require('react-stas');

class TodoListPage extends PureComponent{
  static propTypes = {
    tasks: PropTypes.array.isRequired,
    dispatch: PropTypes.func.isRequired,
  }
  onPressAddTask = ()=>{
    return dispatch('/add-task', {text: `Remove the password: ${Math.random()}`})
  }
  onPressToggleTask = (id)=>{
    return dispatch('/toggle-task', {id})
  }
  render(){
    return (
      <button onClick={this.onPressAddTask}>Add Task</button>
      <ul>
        {this.props.tasks.map(task=><li>
          <input type='checkbox' value={task.completed} onClick={()=>this.onPressToggleTask(task.id)}/>
          <span>{task.get('text')}</span>
        </li>)}
      </ul>
    )
  }
}

connect(({state, dispatch, props})=>{
  return {tasks: state.tasks}
})(TodoListPage)

index.js file:

const ReactDom = require('react-dom');
const {Provider} = require('react-stas')
const store = require('./store');
const TodoListPage = require('./TodoListPage');

ReactDom.render(
  <Provider store={store}><TodoListPage /></Provider>,
  document.getElementById('app')
);

Middleware

store.use((req, resp, next)=>{})

Router

See uni-router

License

Licensed under MIT

Copyright (c) 2017 Tian Jian