9 Star 0 Fork 0

好大棵葱吖 / restack-mobile-gitbook

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
FAST_BUILD.md 1.68 KB
一键复制 编辑 原始数据 按行查看 历史
hibad1 提交于 2017-01-03 11:18 . 修改文件名

快速开发指南

本文以一个加减数为例,效果图如下 效果图

1. 新建页面####

src/js 文件夹下新建一个新的文件夹demo1,并且在demo1中新建一个Demo.jsx.

2. 添加路由####

打开routes.jsx文件,引入刚新建的Demo.jsx.

import Demo from '../demo1/Demo'

并且配置Route,引入路径。

<Route path="/demo" component={Demo}/>

3. 绑定redux####

在demo1的文件夹下,新建一个num.model.js 用来处理数据,也就是做redux的工作。

const num = {
  name: 'num',
  initialState: {
    num:0
  },
sagas:{
  *add(action, {update, put, call}) {
    yield update({num:action.payload.num})
    },
  }
}

4. 页面取值####

页面的值是从num.model.js中拿的。若有数据有改动,则会从页面发送请求,redux更新数据之后,再重新发送数据到页面。

@connect(
  state => {
    return {
      num: state.num || 0
    }
  }
)
export default class Demo extends Component {
  ......
}

5. 发送请求####

在页面可以直接发送请求,在页面把type写好,并且将要传的值放在payload即可。 type要写明sagas的名字以及相应的函数名。

export default class Demo extends Component {
  render() {
    return(
      <button onClick={this.add}>+</button> 
    )
}
  add = () => {
    var num = this.props.num.num
    num ++
    this.props.dispatch({
      type:"num/add",
      payload: {
	    num:num
      }
    })
  }
}

值得注意的是:这里的函数名必须和num.model.js的函数名一致。

JavaScript
1
https://gitee.com/onion_stu/restack-mobile-gitbook.git
git@gitee.com:onion_stu/restack-mobile-gitbook.git
onion_stu
restack-mobile-gitbook
restack-mobile-gitbook
master

搜索帮助