1.0.0 • Published 2 years ago

yushidux v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

yushidux

  1. 组件状态的集中管理库,用法类似于redux
  2. 创建reducers
     const initState = {
         type: 'receive',
         date: dateFormat("yyyy-MM-dd", new Date())
     }
     export const searchRecucer = (action,preState = initState) => {
         let {type, data} = action;
         switch (type) {
             case 'GOSEARCH':
                 return data;
             default:
                 return preState;
         }
     }
     const initTest={
         a:1,b:2
     }
     export const testReducer=(action,preState=initTest)=>{
         let {type, data} = action;
         switch (type) {
             case 'GOTEST':
                 return data;
             default:
                 return preState;
         }
     }
         
  3. 创建actions

    export const search = (data) => {
        return {type: "GOSEARCH", data}
    }
    
    const change = (data) => {
        return {type: "GOTEST", data};
    }
    // 异步action
    export const changeTest = (data) => {
        return  (dispatch,preState)=> {
            setTimeout(() => {
                 dispatch(search(data));
            }, 2000);
        }
    }
  4. 创建store

    import {createStore,combineReducers} from "yushidux";
    
    import {searchRecucer,testReducer} from "./reducers";
    const reducers={
        search:searchRecucer,
        test:testReducer
    };
    export default createStore(combineReducers(reducers))
  5. 在修改store数据

        import store from "../../store";
        import {search} from "../../store/actions";
    	// 
    		store.dispatch(search(data))
  6. 在组件中订阅数据变化
        store.subscribe(()=>{
    		// dosomething
    	})