mirror.js 整合redux的好工具

mirror.js 很简单，让state管理更方便了，没有新增api，值 得使用

https://github.com/yurizhang/mirror

package.json

{
"name": "webpack",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"cross-env": "^5.0.1",
"element-react": "^1.0.19",
"element-theme-default": "^1.3.7",
"isomorphic-unfetch": "^2.0.0",
"mirrorx": "^0.2.5",
"next": "^3.0.0-beta16",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"redux": "^3.7.0"
},
"devDependencies": {
"react-scripts": "^1.0.7",
"redux-devtools": "^3.4.0"
},
"scripts": {
"dev": "node ./server.js",
"next_build": "next build",
"next_start": "node ./server-prd.js",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

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