Open Source Ecosystems

初始化部分

安装

npm i

调试

npm run start

  import {createStore,Provider} from './package/fastkit-dva'
  import appModels from './models/app'
  const app = createStore({})
    app.model(appModels)
    const AppView = () => {
        return (
            <Provider store={app}>
                <App/>
            </Provider>
        )
    }

##connect部分

export default connect(['app'],({app})=>({...app}))(App)

这里其余字段都与react-redux保持一致但是首字段加了一个modelList 这个字段的作用就是为了能够更好的进行监听比如上面的app 也就是说我只会监听app这个model中的state发生的变化其他的reduce变化不会触发这个页面的监听回调

##connect初始化监听部分

      /**
      * 初始化监听
      * 
      * @memberof Connect
      */
      initSubscribe = () =>{
          modelList.forEach((e)=>{
              this.timestamp.push(Date.parse(new Date()))
              this.store.callBackList[e][String(this.timestamp.slice(-1)[0])] = this.onStateChange
          })
      }

##connect组件销毁

    /**
     * 如果页面被销毁则清除掉原来的监听事件 减少计算
     * 
     * @memberof Connect
     */
    componentWillUnmount = () => {
        modelList.forEach((e)=>{
            this.timestamp.forEach((el)=>{
                if (this.store.callBackList[e][el]){
                    delete this.store.callBackList[e][el]
                }
            })
        })
    };

##model部分

import test from '../utils/test'
export default {
    namespace : 'app',
    state : {
        num: 0
    },
    reducers : {
        add(state, {payload}) {
            return ({...state,num:state.num + 1})
        },
        reduce(state,{payload}){
            return ({...state,num:state.num - 1})
        },
        reset(state,{payload}){
            return ({...state,num:0})
        }
    },
    effects : {
        *clear({payload},{select,put,take,call}){
            yield call(test,11111)
        }
    }
}