Angular developer React+redux Complex: "A demo proves your development inefficiency"

I've seen an article that writes about the complexity of the jquery developer's angular. As a angular developer, I'm going to spit out the React+redux complex.

Example

In order to make everyone feel comfortable, I use the simplest one demo to show React+redux "curved Around", the following this program is I write with react and redux. However, this program in the angular line JS do not have to write!!!

Presentation components

App.js

import React, { findDOMNode, Component } from ‘react‘;
import ReactDOM from ‘react-dom‘;
import { connect } from ‘react-redux‘;
import * as action from ‘./actions‘
class App extends Component {
Render () {
Return (
<div>
<input type=‘text‘ value={this.props.propsValue} onChange={this.changeHandle.bind(this)} ref="input"/>
{this.props.propsValue}
</div>
);
}
changeHandle(){
const node = ReactDOM.findDOMNode(this.refs.input);
const value = node.value.trim();
this.props.change(value);
}
}
function mapStateToProps(state) {
Return {
propsValue: state.value
}
}
//Map the specified value of state to props, and all methods of action to props
export default connect(mapStateToProps,action)(App);

The students who have not played Redux may have seen a bit dizzy, Redux's design is this:

The state is the data, the component is the presentation of the data, the action is the action, and the action is updated by reducer.

The above code, we have done three things:

1. Write a visual component (which is actually an input);
2. Binds the Value property of state to the props of the component;
3. Binds all methods of the action on the props of the component.

Action and reducer two a good base for updating state

Actions.js

 
//Define a change method and bind it to props in the future
export function change(value){
Return{
type:"change",
Value:value
}
}

Reducers.js

 
//Reducer is a function. You can call it anything. The function is to return a new state (an object) after the action is triggered
export default function change(state,action){
if(action.type=="change")return{value:action.value};
return {value:‘default‘};
}

The above code we do one thing: After the user triggers the action, the status is updated.

Because the state and the props of the component are bound, the components change as well!

Store appearances, inject reducer into the component

Index.js

import React from ‘react‘
import { render } from ‘react-dom‘
import { createStore } from ‘redux‘
import { Provider } from ‘react-redux‘
import App from ‘./App‘
import inputApp from ‘./reducers‘
let store = createStore(inputApp);
Render (
<Provider store={store}>
<App / >
</Provider>,
document.querySelector("#app")
);

The provider is the top layer of the component, used to put the store.

The above code, we have done three things:

1. Put Reducer in the store
2. Put the store in provider
3. Place the provider on top of the component and render

Finally compile and run with Webpack

Webpack.config.js

 
var path = require(‘path‘); var webpack = require(‘webpack‘);

module.exports = {
    entry: {
        app:path.join(__dirname, ‘src‘),
        vendors: [‘react‘,‘redux‘]
    },
    output: {
        path: path.join(__dirname, ‘dist‘),
        filename: ‘[name].js‘ },
    module: {
        loaders: [
            {
                test:/\.js?$/,
                exclude:/node_modules/,
                loader:‘babel‘,
                query:{
                    presets:[‘react‘,‘es2015‘]
                }
            }
        ]
    },
    plugins: [ new webpack.optimize.CommonsChunkPlugin(‘vendors‘, ‘vendors.js‘)
    ]
};

All right, start the groove.

The slot points are as follows:

1. Too many concepts, props,state,action,reducer,store,provider, this has not yet introduced the router, for the novice, can not in the mind immediately form a clear process
2. Many concepts are redundant, such as reducer and store
3. Very simple a function, write so much code, if you use angular line of code are not written
4. Look at the high performance of the virtual DOM and the server rendering, how much sacrifice, the design of virtual DOM if angular introduced, then react advantage?
5. Look at what react so-called simple, smooth learning curve, after introducing some kind of frame, is still not so complicated. React itself is very simple, but what is the use of it? Most of us do not have to combine backbone or angular or flux,reflux,redux to use them. Does that look easy?
6. Update too fast, if I do not list Package.json, can you run this program in a few months?
7. The HTML template for a page is completely fragmented, and angular's instructions are suspect, but angular is designed to "expand the ability of HTML" and does not have a completely fragmented template.
8. ......

These ideas, I think, are sympathetic to the angular developers.

React developers who have not used angular feel react good, probably because they have not used angular, and have concluded that react and jquery compare.

React developers who have used angular feel react good, but simply because

1. React Server Rendering
2. The high performance that the diff algorithm brings.

However, regardless of performance and SEO, the angular and mvvm other frameworks are relatively superior in terms of development efficiency alone!

There are, of course, problems with scenarios, because our institute is currently doing big data platforms, all crud and forms, and using angular development will be very appropriate.

Must See

Finally, I would like to say that this article entertainment-based, does not have the actual reference value. Because Redux is used to manage the state of the framework, usually in large complex projects will play an advantage, and I use such a simple demo to illustrate the problem, it is the grandstanding, in order to attract people eyeball (to bite me). Front end ring too impetuous, love to read this article. Of course, beginners can also use this article to learn React+redux.

Example code:

Https://github.com/lewis617/myReact/tree/master/input-redux

How to run:

NPM Install

NPM Run Build

Open index.html Manually

Angular developer React+redux Complex: "A demo proves your development inefficiency"