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