yushidux

1.0.0 • Public • Published

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
    	})

Readme

Keywords

none

Package Sidebar

Install

npm i yushidux

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

3.2 kB

Total Files

5

Last publish

Collaborators

  • yushi5344