Skip to content

yqcscaff/pugdepro

Repository files navigation

Welcome to Pugdepro 🚀🚀🚀

pugdepro

Version Documentation Maintenance License: MIT

react + react-router + redux + babel + webpack + proxy + mock built-in scaffolding, redux management state, emulation and proxy emulation or proxy interface. Load modules on demand.

📦Install

npm install

🔨Usage

npm start
// Local dev

✨Run Build

npm run build
// Online code packaged to dist

🐔Run Docs

npm run docs
// Generate the docs directory of githubpage and test the online code with githubpage

🎮Run tests

npm run test

Redux State Management

example:
// define state in ./src/store/movielist
import { createAction, handleActions } from 'redux-actions';

export default {
  actions: {
    setList: createAction('putList'),
    clearList: createAction('empList'),
  },
  reducer: handleActions({
    putList(state, action) {
      return { ...state, list: action.payload.list };
    },
    empList(state) {
      return { ...state, list: [] };
    }
  }, {
    list: []
  })
};

// use in ./src/view/MovieList
...
import { connect, Provider } from 'react-redux';

const store = createStore(reducers);
const mapStateToProps = (state) => ({ ...state.movielist });
const mapDispatchToProps = (dispatch) => ({
  setList(list) {
    dispatch(actions.movielist.setList(list));
  },
  clearList() {
    dispatch(actions.movielist.clearList());
  }
});
...

Router Management

in ./config/router.js
load on demand example:
import MovieList from  'bundle-loader?lazy&name=lazy-[name]!../src/view/MovieList'

<Route path='/movielist' component={() => (
  <Bundle load={MovieList}>
    {(MovieList) => <MovieList />}
  </Bundle>
)} />

🔗 Links

homepage

Author

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

This project is MIT licensed.