用 react+moox 五分钟写一个 todomvc 应用-CSDN博客

前言

使用 react, redux 开发一个应用是非常复杂的，moox 是基于 redux 的高性能状态管理机，简化了 redux 模板代码和提高了效率，本篇教程将带领大家在五分钟时间做一个 todomvc 应用。当然，本篇教程不包括 react 环境搭建，推荐使用新的打包工具 Parcel

注：parcel 需要 node > 8.0

效果图

源码地址：demo

起步

npm install --save moox
npm install --save react-redux
复制代码

目录结构

components/App.js
models/user.js
index.js
model.js
复制代码

入口文件 index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import App from './components/App'
import Model from './model'

const store = Model.getStore()
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

复制代码

store 通过 getStore 方法获取，传给 Provider 组件。

model.js

import moox from '../src/index'
import user from './models/user'

export default moox({
  user
})

复制代码

Model 是通过 moox(Object) 生成的对象。

userModel 文件 user.js

export default {
  // 初始化 state
  state: {
    list: ['tom', 'xiaoming'],
    status: 0,
    filterText: ''
  },
  // 带Action 后缀的字符串代表一个 action函数
  addUserSyncAction: null,
  requestStatusAction: null,
  changeFilterValueAction: (text)=>({
    text
  }),
  changeCurrentEditUserAction: (name, index) =>({
    name,
    index
  }),
  addUserAction: () => (
    {
      payload: new Promise((resolve) => {
        setTimeout(function () {
          resolve(100)
        }, 300)
      })
    }
  ),
  delUserAction: (index)=>{
    return {
      index: index
    }
  },  
  // 在 reducers 对象里写对应 action 的 state 处理函数，参数通过 action 对象获取。
  reducers: {
    changeCurrentEditUserAction: function(state, action){
      state.list[action.index] = action.name
    },
    changeFilterValueAction: function(state, action){
      state.filterText = action.text
    },
    changeEditIndexAction: function(state, action){
      state.currentEditIndex = action.index
    },
    addUserAction: function (state, action) {
      state.list.push(getRandomName())
      state.status = 0
    },
    addUserSyncAction: function(state, action){
      state.list.push(getRandomName(5))
    },
    requestStatusAction: function (state, action) {
      state.status = 1
    },
    delUserAction: function(state, action){
      state.list.splice(action.index, 1)
    }
  }
}

function getRandomName(len=4){
  let str = ''
  while(len--) str += String.fromCharCode(97 + Math.ceil(Math.random()* 25))
  return str
}

复制代码

组件 App.js

import React from 'react'
import { connect } from 'react-redux'
import Model from '../model'

const App = (props) => {
  const handleClick = () => {
    if (props.user.status === 1) return;
    props.requestStatusAction()
    props.addUserAction()
  }
  const handleClickSync = () => props.addUserSyncAction()
  const delUser = (index) => ()=>props.delUserAction(index)
  const getContent = (item, index) => {
    return <input type="text" onChange={(event) => {
      props.changeCurrentEditUserAction(event.target.value, index)
    }} value={item} />
  }
  const list = props.user.list.filter(item=>{
    item = item + '';
    return !props.user.filterText || item.indexOf(props.user.filterText) !== -1
  })

  return <div style={{ width: 500, margin: '100px auto' }}>
    <div >
      <input placeholder="Filter" style={{height: 35, width: '100%', backgroundColor: '#eee'}} type="text" value={props.user.filterText} onChange={(event)=> props.changeFilterValueAction(event.target.value)} />
    </div>
    <div>
      <button style={{ height: '40px', margin: 30 }} onClick={handleClick}>Async Add Random Number</button>
      <button style={{ height: '40px', margin: 30 }} onClick={handleClickSync}>Add Random Number</button>
      {props.user.status === 1 ? 'loading...' : ''}
    </div>
    {list.map((item, index) => {
      return <div style={{ height: 30, margin: 15, backgroundColor: '#eee' }} key={index}>{}{getContent(item, index)} &nbsp; <span onClick={delUser(index)}>X</span></div>
    })}
  </div>
}
export default connect((state) => ({
  user: state.user
}), {
    addUserAction: Model.user.addUserAction,
    requestStatusAction: Model.user.requestStatusAction,
    delUserAction: Model.user.delUserAction,
    addUserSyncAction: Model.user.addUserSyncAction,
    changeCurrentEditUserAction: Model.user.changeCurrentEditUserAction,
    changeFilterValueAction: Model.user.changeFilterValueAction
  })(App)
复制代码