middlewares in GCC

Our GCC is a project developed by React that makes it painless to create interactive UIs. Design simple views for each state in your application, and React will update and render just the right components when your data changes.And there is a picture that we can understand React better:

Today, we will show you all middleware in GCC and describing some important middleware:

Middleware in GCC	Intention
react-dom	The react-dom package provides DOM-specific methods that can be used at the top level of your app. we can use it like as: import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello world</h1> , document.getElementById('app'));
prop-types	The role of the library is to react with proptypes type detection. As the name suggests prop-types is the react component props object in the type of detection, because props is the flow of data flow pipeline, we can easily monitor the prop-types in most of the variables in the variable type.propTypes can be used to detect all data types of variables, including the basic type of string, boolean, number, and the reference type of object, array, function, and even ES6 new symbol type, such as: import PropTypes from 'prop-types'; yourComponent.propTypes = { prop1: PropTypes.object, prop2: PropTypes.func, prop3: PropTypes.array, prop1: PropTypes.bool, prop2: PropTypes.string, prop3: PropTypes.number, }; In addition, we can use 3 method to do more detaction: oneOfType: to receive parameters is an array, the array element is the type of data you want to detect, such as: yourComponent.propTypes = { prop1:PropTypes.oneOfType( [PropTypes.string,PropTypes.number] ) }  oneOf: to receive parameters is an array, the array element is the value of the variable you want to pass, such as: yourComponent.propTypes = { prop1:PropTypes.oneOf( [12,13] ) } arrayOf, objectOf: arrayOf receives a parameter, which is the data type of the specified array element. The objectOf received parameter is the data type of the attribute shape: The shape method is better than arrayOf and objectOf because the data types of arrayOf and objectOf are forcibly specified, but usually there should be a number of different types of attributes in an object, which is what the shape is to do, such as: yourComponent.propTypes = { prop1: PropTypes.shape({ prop1_1: PropTypes.func, prop1_2: PropTypes.bool, prop1_3: PropTypes.string, }), } More Details
redux	React is just an abstract layer of the DOM, not a complete solution for Web applications. When we use React to build large applications, the communication between components becomes cumbersome. Redux is to solve this problem.Redux design is very simple, two sentences. Web application is a state machine, the view and the state is one to one correspondence. all the state, stored in an object inside. Store is where to save the data, you can think of it as a container. The entire application can only have one Store. Redux provides createStore this function, used to generate Store, such as: import { createStore } from 'redux'; const store = createStore(fn); And Store provide 3 methods: store.getState() – Get a snapshot of the current time Store. store.dispatch() – Send a atcion to tell Store to deal with. store.subscribe() – Store allows you to set the listening function using the store.subscribe method, which is executed automatically once State has changed. The following is a simple createStore implementation, we can better understand the Store: const createStore = (reducer) => { let state; let listeners = []; const getState = () => state; const dispatch = (action) => { state = reducer(state, action); listeners.forEach(listener => listener()); }; const subscribe = (listener) => { listeners.push(listener); return () => { listeners = listeners.filter(l => l !== listener); } }; dispatch({}); return { getState, dispatch, subscribe }; }; Another, Redux provide a method of combineReducers for Reducer's split. You just define the child Reducer functions, and then use this method to combine them into a large Reducer. More Details
react-redux	The react-redux component is actually redux the author's custom library for the reactor and react-redux divides all components into two categories: UI components and container components.In short, the UI component is responsible for the rendering of the UI, and the container component is responsible for managing the data and logic. React-Redux provides a connect method for generating container components from UI components, such as: import { connect } from 'react-redux' const containerComponent = connect( mapStateToProps, mapDispatchToProps )(UIComponent) In the above code, mapStateToProps is a function. It is the role of its name as it is, from the (external) state object (UI component) props object mapping; mapDispatchToProps is the second argument to the connect function that is used to create a mapping of the UI component's parameters to the store.dispatch method. In other words, it defines which users should operate as Action, pass to the Store. It can be a function or an object. Source Code
redux-form	redux-form works with React Redux to enable an html form in React to use Redux to store all of its state. The diagram below represents the simplified data flow: Note: redux-form has been completely rewritten for v6, because of a fundamental design change. More Details
classnames	A simple JavaScript utility for conditionally joining classNames together. In React, one of its primary use cases is to make dynamic and conditional className props simpler to work with (especially more so than conditional string manipulation). So where you may have the following code to generate a classNameprop for a <button> in React: var Button = React.createClass({ // ... render () { var btnClass = 'btn'; if (this.state.isPressed) btnClass += ' btn-pressed'; else if (this.state.isHovered) btnClass += ' btn-over'; return <button className={btnClass}>{this.props.label}</button>; } }); You can express the conditional classes more simply as an object: var classNames = require('classnames'); var Button = React.createClass({ // ... render () { var btnClass = classNames({ btn: true, 'btn-pressed': this.state.isPressed, 'btn-over': !this.state.isPressed && this.state.isHovered }); return <button className={btnClass}>{this.props.label}</button>; } }); More Details
Other small middle-ware	react-select、react-tabs、d3

React