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