mirror.js 整合redux的好工具

標籤：5.6   1.0   tool   return   ons   rom   etc   start   管理   

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的好工具