The common libraries and plugins used will be constantly updated…

Redux DevTools Extension: Redux DevTools Extension for browser debugging

  1. Browser Installation plug-in
Search for Redux DevTools and install the corresponding browser on GitHubCopy the code
  1. use
Const store = createStore(Reducer, initialState, window.devToolsextension? Window.devtoolsextension () : f => f ); Const store = createStore(Reducer, initialState, compose(applyMiddleware(thunk)) window.devToolsExtension ? window.devToolsExtension() : f => f ) );Copy the code

React-router-dom asynchronous loadable routes

  1. The installation
npm install react-loadable
Copy the code
  1. use
// The method of getting route parameters needs to be adjusted to call withRouter in the react-router-dom and export default in the corresponding re-component connect(null,null)(withRouter(RouterTest)) import React from 'react' import Loadable from 'react-loadable' const LoadingRouterTest = Loadable({loader:) => import('./ Routertest.js '), loading () {return <div> loading... </div>}}) export default () => <LoadingRouterTest /> // Or <Route exact path="/account/bindRegistration/:thirdPartyId/:type/" render={routeProps => { return createElement( Loadable({ loader: () => import(/* webpackChunkName: "account.bindRegister" */ "./views/containers/auth/refactor/BindPage"), loading: LoadingComponent, delay: 200 }), { ... routeProps } ); }} / >Copy the code

Classnames: js dynamically adds the classname

The specific use

  1. The installation
npm install classnames
Copy the code
  1. use
import cls from 'classnames'; // If the value is true, add the class name to the attribute. // If the value is false, do not add the class name. const serverTypeClassName = cls('server-type-info-item', { 'has-server-type': ! isEmpty(currentSelectServeType), }); <div className={serverTypeClassName}> Service type </div>Copy the code

Query-string: parses and strings the URL query string

The specific use

  1. The installation
npm install query-string
Copy the code
  1. Use (common apis)
1) qs.parse(string, [options]) import qs from 'query-string'; location.search // ? name=jim location.hash // #token=123 qs.parse('? name=jim') // {name: 'jim'} qs.parse('#token=123') // {token: '123'} qs.parse('name=jim&name=lily&age=22') // {name: ['jim', 'lily'], age: 22} 2) qs.stringify(object, [options]) qs.stringify({name: 'jim', age: 22}); // 'age=22&name=jim' qs.stringify({name: ['jim', 'lily'], age: 22}); // 'age=22&name=jim&name=lily'Copy the code