├── src ├── app.scss ├── components │ ├── A │ │ ├── A.scss │ │ └── A.js │ └── B │ │ ├── B.scss │ │ └── B.js ├── pages │ ├── index │ │ ├── index.scss │ │ └── index.js │ └── index2 │ │ └── index.js ├── constants │ └── counter.js ├── reducers │ ├── index.js │ └── counter.js ├── actions │ └── counter.js ├── store │ └── index.js ├── app.js └── index.html ├── .gitignore ├── .eslintrc ├── config ├── dev.js ├── prod.js └── index.js ├── .editorconfig └── package.json /src/app.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | .temp/ 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /src/components/A/A.scss: -------------------------------------------------------------------------------- 1 | .a { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/B/B.scss: -------------------------------------------------------------------------------- 1 | .b { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/index/index.scss: -------------------------------------------------------------------------------- 1 | .index { 2 | color: black; 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["taro"], 3 | "parser": "babel-eslint" 4 | } 5 | -------------------------------------------------------------------------------- /src/constants/counter.js: -------------------------------------------------------------------------------- 1 | export const ADD = 'ADD' 2 | export const MINUS = 'MINUS' 3 | -------------------------------------------------------------------------------- /src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | import counter from './counter' 3 | 4 | export default combineReducers({ 5 | counter 6 | }) 7 | -------------------------------------------------------------------------------- /config/dev.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | NODE_ENV: '"development"' 4 | }, 5 | defineConstants: { 6 | }, 7 | weapp: {}, 8 | h5: {} 9 | } 10 | -------------------------------------------------------------------------------- /config/prod.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | NODE_ENV: '"production"' 4 | }, 5 | defineConstants: { 6 | }, 7 | weapp: {}, 8 | h5: {} 9 | } 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /src/actions/counter.js: -------------------------------------------------------------------------------- 1 | import { 2 | ADD, 3 | MINUS 4 | } from '../constants/counter' 5 | 6 | export const add = () => { 7 | return { 8 | type: ADD 9 | } 10 | } 11 | export const minus = () => { 12 | return { 13 | type: MINUS 14 | } 15 | } 16 | 17 | // 异步的action 18 | export function asyncAdd () { 19 | return dispatch => { 20 | setTimeout(() => { 21 | dispatch(add()) 22 | }, 2000) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from 'redux' 2 | import thunkMiddleware from 'redux-thunk' 3 | import { createLogger } from 'redux-logger' 4 | import rootReducer from '../reducers' 5 | 6 | const middlewares = [ 7 | thunkMiddleware, 8 | createLogger() 9 | ] 10 | 11 | export default function configStore () { 12 | const store = createStore(rootReducer, applyMiddleware(...middlewares)) 13 | return store 14 | } 15 | -------------------------------------------------------------------------------- /src/components/B/B.js: -------------------------------------------------------------------------------- 1 | import Taro, { Component } from '@tarojs/taro' 2 | import { View, Text } from '@tarojs/components' 3 | import './B.scss' 4 | 5 | export default class B extends Component { 6 | onClickHandler = () => { 7 | this.props.onClick() 8 | } 9 | 10 | render () { 11 | return ( 12 | 13 | b component 14 | 15 | ) 16 | } 17 | } 18 | 19 | -------------------------------------------------------------------------------- /src/reducers/counter.js: -------------------------------------------------------------------------------- 1 | import { createReducer } from 'redux-immutablejs' 2 | import { fromJS } from 'immutable' 3 | import { ADD, MINUS } from '../constants/counter' 4 | 5 | export default createReducer(fromJS({ 6 | num: 0 7 | }),{ 8 | [ADD]: (state) => { 9 | const counterState = state.toJS() 10 | return state.merge({ 11 | num: counterState.num + 1 12 | }) 13 | }, 14 | [MINUS]: (state) => { 15 | const counterState = state.toJS() 16 | return state.merge({ 17 | num: counterState.num - 1 18 | }) 19 | } 20 | }) 21 | -------------------------------------------------------------------------------- /src/pages/index2/index.js: -------------------------------------------------------------------------------- 1 | import Taro, { Component } from '@tarojs/taro' 2 | import { View, Text } from '@tarojs/components' 3 | 4 | export default class Index extends Component { 5 | config = { 6 | navigationBarTitleText: '首页2' 7 | } 8 | 9 | componentWillMount () { 10 | 11 | } 12 | 13 | componentDidMount () { 14 | console.log(this.$router.params) 15 | } 16 | 17 | componentWillUnmout () { } 18 | 19 | componentDidShow () { } 20 | 21 | componentDidHide () { } 22 | 23 | handleX = () => { 24 | console.log('sdsd') 25 | } 26 | 27 | render () { 28 | return ( 29 | 30 | 2 31 | 32 | ) 33 | } 34 | } 35 | 36 | -------------------------------------------------------------------------------- /src/components/A/A.js: -------------------------------------------------------------------------------- 1 | import Taro, { Component } from '@tarojs/taro' 2 | import { View, Text, Button } from '@tarojs/components' 3 | import './A.scss' 4 | 5 | export default class A extends Component { 6 | 7 | componentWillMount () { 8 | // console.log(this.$router.params) 9 | } 10 | 11 | componentDidMount () { 12 | console.log(this.props) 13 | } 14 | 15 | componentWillReceiveProps (nextProps) { 16 | console.log(this.props) 17 | console.log(nextProps) 18 | } 19 | 20 | componentWillUnmount () { } 21 | 22 | componentDidShow () { } 23 | 24 | componentDidHide () { } 25 | 26 | onClickHandler () { 27 | this.props.onClick() 28 | } 29 | 30 | render () { 31 | return ( 32 | 33 | 34 | a component {this.props.t} 35 | 36 | ) 37 | } 38 | } 39 | 40 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import Taro, { Component } from '@tarojs/taro' 2 | import { Provider } from '@tarojs/redux' 3 | 4 | import Index from './pages/index' 5 | 6 | import './app.scss' 7 | 8 | import configStore from './store' 9 | 10 | const store = configStore() 11 | 12 | class App extends Component { 13 | config = { 14 | pages: [ 15 | 'pages/index/index', 16 | 'pages/index2/index' 17 | ], 18 | window: { 19 | backgroundTextStyle: 'light', 20 | navigationBarBackgroundColor: '#fff', 21 | navigationBarTitleText: 'WeChat', 22 | navigationBarTextStyle: 'black' 23 | } 24 | } 25 | 26 | componentDidMount () {} 27 | 28 | componentDidShow () {} 29 | 30 | componentDidHide () {} 31 | 32 | componentCatchError () {} 33 | 34 | render () { 35 | return ( 36 | 37 | 38 | 39 | ) 40 | } 41 | } 42 | 43 | Taro.render(, document.getElementById('app')) 44 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | projectName: 'kj', 3 | date: '2018-6-8', 4 | designWidth: 750, 5 | sourceRoot: 'src', 6 | outputRoot: 'dist', 7 | babel: { 8 | sourceMap: true, 9 | presets: [ 10 | 'env' 11 | ], 12 | plugins: [ 13 | 'transform-class-properties', 14 | 'transform-decorators-legacy', 15 | 'transform-object-rest-spread', 16 | ['transform-runtime', { 17 | 'helpers': false, 18 | 'polyfill': false, 19 | 'regenerator': true, 20 | 'moduleName': 'babel-runtime' 21 | }] 22 | ] 23 | }, 24 | defineConstants: { 25 | }, 26 | mini: { 27 | 28 | }, 29 | h5: { 30 | publicPath: '/', 31 | staticDirectory: 'static', 32 | postcss: { 33 | autoprefixer: { 34 | enable: true 35 | } 36 | } 37 | } 38 | } 39 | 40 | module.exports = function (merge) { 41 | if (process.env.NODE_ENV === 'development') { 42 | return merge({}, config, require('./dev')) 43 | } 44 | return merge({}, config, require('./prod')) 45 | } 46 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Taro 12 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "taro-redux-sample", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "dev:weapp": "taro build --type weapp --watch", 10 | "dev:h5": "taro build --type h5 --watch" 11 | }, 12 | "author": "", 13 | "license": "MIT", 14 | "dependencies": { 15 | "@tarojs/components": "2.0.7", 16 | "@tarojs/redux": "2.0.7", 17 | "@tarojs/redux-h5": "2.0.7", 18 | "@tarojs/router": "2.0.7", 19 | "@tarojs/taro": "2.0.7", 20 | "@tarojs/taro-alipay": "^2.0.7", 21 | "@tarojs/taro-h5": "2.0.7", 22 | "@tarojs/taro-weapp": "2.0.7", 23 | "regenerator-runtime": "0.11.1", 24 | "babel-runtime": "^6.26.0", 25 | "@tarojs/taro-jd": "2.0.7", 26 | "immutable": "^3.8.2", 27 | "nerv-redux": "^1.2.18", 28 | "nervjs": "^1.3.0", 29 | "redux": "^4.0.0", 30 | "redux-immutablejs": "^0.0.8", 31 | "redux-logger": "^3.0.6", 32 | "redux-thunk": "^2.3.0" 33 | }, 34 | "devDependencies": { 35 | "@tarojs/plugin-babel": "2.0.7", 36 | "@tarojs/plugin-csso": "2.0.7", 37 | "@tarojs/plugin-sass": "2.0.7", 38 | "@tarojs/plugin-uglifyjs": "2.0.7", 39 | "@tarojs/webpack-runner": "2.0.7", 40 | "@tarojs/mini-runner": "2.0.7", 41 | "babel-plugin-transform-runtime": "^6.23.0", 42 | "babel-eslint": "^8.2.3", 43 | "babel-plugin-transform-class-properties": "^6.24.1", 44 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 45 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 46 | "babel-preset-env": "^1.6.1", 47 | "eslint": "^4.19.1", 48 | "eslint-config-taro": "2.0.7", 49 | "eslint-plugin-import": "^2.12.0", 50 | "eslint-plugin-react": "^7.8.2", 51 | "eslint-plugin-taro": "2.0.7" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/pages/index/index.js: -------------------------------------------------------------------------------- 1 | import Taro, { Component } from '@tarojs/taro' 2 | import { View, Button } from '@tarojs/components' 3 | import { connect } from '@tarojs/redux' 4 | import { bindActionCreators } from 'redux' 5 | import A from '../../components/A/A' 6 | import B from '../../components/B/B' 7 | 8 | import * as Actions from '../../actions/counter' 9 | 10 | import './index.scss' 11 | 12 | function mapStateToProps(state) { 13 | return { 14 | counter: state.counter.toJS() 15 | } 16 | } 17 | function mapDispatchToProps(dispatch) { 18 | return { 19 | ...bindActionCreators(Actions, dispatch) 20 | } 21 | } 22 | @connect(mapStateToProps, mapDispatchToProps) 23 | export default class Index extends Component { 24 | config = { 25 | navigationBarTitleText: '首页' 26 | } 27 | 28 | state = { 29 | x: [1, 2] 30 | } 31 | 32 | componentWillMount () { 33 | console.log('page willmount') 34 | setTimeout(() => { 35 | this.setState({ 36 | x: [3, 4] 37 | }) 38 | }, 2000); 39 | 40 | } 41 | 42 | componentDidMount () { 43 | console.log('page didmount') 44 | } 45 | 46 | componentWillReceiveProps (nextProps) { 47 | console.log(this.props, nextProps) 48 | } 49 | 50 | componentWillUnmount () { } 51 | 52 | componentDidShow () { } 53 | 54 | componentDidHide () { } 55 | 56 | goto = () => { 57 | Taro.navigateTo({ 58 | url: '/pages/index2/index?sd=1' 59 | }) 60 | } 61 | 62 | render () { 63 | const { add, minus, asyncAdd } = this.props 64 | return ( 65 | 66 | 67 | 68 | 69 | {this.props.counter.num} 70 | {this.state.x.map((item, index) => )} 71 | 72 | 73 | 74 | 75 | ) 76 | } 77 | } 78 | --------------------------------------------------------------------------------