mirror.js 整合redux的好工具

import React from 'react'
import mirror, {actions, connect, render} from 'mirrorx'

// 声明 Redux state, reducer 和 action，
// 所有的 action 都会以相同名称赋值到全局的 actions 对象上


mirror.model({
    name: 'app',
    initialState: {
      total:1,
      list: [70,10] 
    },
    reducers: {  //用来修改state
      increment(state,data) {

        console.log("state increment:"+data)
        console.log(state)
        let list=state.list;
        console.log(list)
        list.push(Math.floor(Math.random()*100));
        //let tmpArray=state.list ||[];
        return {   //这里返回的要和你state结构是一样的
          total:state.total+1,
          list: list
        }
      },
      decrement(state) {
        return {
          total:state.total-1,
          list: [88]  
        }
      }
    },
    effects: {
      async incrementAsync() {   //用来异步修改state
        await new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve()
          }, 1000)
        })
        actions.app.increment()
      }
    }
  })
  
  const App = props => {
    console.log("props")
    console.log(props)
    return (
      <div id="counter-app">
        <h1>{props.app.total}</h1>
        <h1>{props.app.list}</h1>
        <div className="btn-wrap">
          <button onClick={() => actions.app.decrement()}>-</button>
          <button onClick={() => actions.app.increment('ssssss')}>+</button>
          <button style={{width: 100}} onClick={() => actions.app.incrementAsync()}>+ Async</button>
        </div>
      </div>
    )
  }
  
  const  Mirror=connect(state => {
    console.log("state")
    console.log(state)
    return {
      app:state.app,   //mapToProps 把state做为prop送给render
      //total: state.app.total,
      //data: state.app.list
           }
  })(App)

  render(<Mirror/>, document.getElementById('mirror'))