tmp sync model them lis tools devtools floor version

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

mirror.js 整合redux的好工具