faurewu / zoro Goto Github PK

import zoro from '@opcjs/zoro' // 引入zoro
import { createLoading, createMixin } from '@opcjs/zoro-plugin'
import { index, counter } from '../models/index'


// import configStore from './store'
// 通过zoro创建store，移除原有的代码
const app = zoro()
// 加载model
app.model(counter)
app.model(index)
// 使用Loading插件
app.use(createLoading())
// 使用Mixin
app.use(createMixin({
  namespace: 'common',
  state: {},
  reducers: {
    updateState (action, state) {
      console.log({ state, action })
      return { ...state, ...action.payload }
    }
  },
  effects: {
  }
}))
const store = app.start(false)
export { store, app }

import { store, app } from './utils/store'
...
componentDidMount () {
    app.setup()
}
...

import * as indexApi from './service';
function delay(time) {
  return new Promise(resolve => {
    setTimeout(resolve, time)
  })
}

export default {
  namespace: 'index',
  state: {
    search: {
      placeholder: '',
      hots: ['1', '2', '3', '4', '5']
    },
    pictures: [{}],
    togethers: [{}, {}],
    shops: [{}, {}, {}, {}]
  },
  mixins: ['common'],
  effects: {
    async asyncAdd(action, { put }) {
      await delay(2000)
      put({ type: 'add' })
    },

    async get ({}, { put }) {
      const { success, message, data } = await indexApi.get()
      console.log({ data })
      if (success) {
        put({
          type: 'updateState',
          payload: {
            ...data
          }
        })
      }
    }
  },
  
  reducers: {
  }
}

import Taro, { Component } from '@tarojs/taro';
import { View, Text, Button } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import { createDispatcher } from 'roronoa-zoro';
import * as MODELS from '../../../constants/models';
import Counter from '../../../components/counter/presenter';

const counterDispatcher = createDispatcher(MODELS.MODEL_COUNTER);
@connect(state => ({
  count: state[MODELS.MODEL_COUNTER].count,
  parts: state[MODELS.MODEL_COUNTER].bodyParts
}))
export default class CounterDemo extends Component {
  config = {
    navigationBarTitleText: '计数器demo'
  };

  add = () => {
    counterDispatcher.add();
  };

  dec = () => {
    counterDispatcher.dec();
  };

  queryBody = () => {
    counterDispatcher.queryBodyParts;
  }

  render() {
    console.log(this.props);
    const { count } = this.props;
    return (
      <View>
        <Counter count={count} onAdd={this.add} onDec={this.dec} />
        <View style="height: 5px" />
        <Button onClick={this.queryBody}>异步加载后台数据</Button>
        {this.props.parts.map(item => {
          return (
            <View key={item.id}>
              <Text key={item.id}>{item.name}</Text>
            </View>
          );
        })}
      </View>
    );
  }
}

import * as MODELS from '../constants/models';
import * as API from '../services/demo';

export default {
  namespace: MODELS.MODEL_COUNTER,

  state: {
    count: 0,
    bodyParts: []
  },

  effects: {
    async queryBodyParts({}, { put }) {
      const ret = await API.getBodyParts();
      put({
        type: 'getBodyParts',
        payload: ret
      });
    }
  },

  reducers: {
    getBodyParts({ payload }, state) {
      return {
        ...state,
        bodyParts: payload
      };
    },
    add({}, state) {
      console.log('add-----');
      return {
        ...state,
        count: state.count + 1
      };
    },
    dec({}, state) {
      console.log('dec-----');
      return {
        ...state,
        count: state.count - 1
      };
    }
  }
};