used:Taro、redux、redux-saga、sass、Typescript (nodejs v10.15.1、@tarojs/cli v2.0.7)
# 使用 npm 安装 CLI
$ npm install -g @tarojs/[email protected]
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/[email protected]
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/[email protected]
$ npm install / yarn install
$ npm run dev:h5 / yarn dev:h5
# Mac
$ ./run.sh dev:h5
# 务必安装全局工具 soda-bo-cli
$ sbc new PageName # 支持多级目录 例如: sbc new User/Update
$ npm run build:** / yarn build:**
创建reducer 和 action(插件会遍历src/pages
下的所有redux.ts
文件):
// src/pages/Index/redux.ts
export const list = buildRedux('IndexBanner')({
url: api.login, // * (payload, {getState}) => '/url'
method: 'get',
})
export const detail = buildRedux('BannerDetail')({
url: api.login, // * (payload, {getState}) => '/url'
method: 'get',
})
以上会创建:
state | action |
---|---|
state.Index.list |
Action.IndexBanner.start()/Action.IndexBanner.start()... |
state.Index.detail |
Action.BannerDetail.start()/Action.BannerDetail.start()... |
state.Index.list
和state.Index.detail
中的Index
为 文件夹名称pages/Index/redux.ts
中的Index
(多级目录/pages/User/Login => UserLogin``)。buildRedux
中的第一个参数则是Action
的名称。
Action
为import { Action } from 'store/helper'
提供
你依然可以通过connect
方法来连接调用 => @connect(state => {...}, dispatch => {...})
state关联数据:
'store/helper'
提供了 inject
方法(此方法只能关联整个模块到组件,且不能自定义名称, 只是提供了自能提示):
import { inject } from 'store/helper'
@inject('Index')
class Home extends Taro.PureComponent {
componentDidMount() {
this.props.Index // {list: {...}, detail: {...}}
}
}
inject
参数为字符串 或者 数组
state结构图为: