Still tangled in Flux or Relay, maybe Redux is better for you

Heavyweight News, Redux 1.0 released, finally can be assured that the production environment!

In this era of application technology expansion, there are a lot of frameworks popping up every day, claiming to solve the problem of XYZ and a series of bull X, and then not be mentioned for some time. But the development of the application is still need to maintain! So when choosing a frame, don't just use your own cool, but also think about the difficulty of others when they take over.

Because Flux itself is not detailed enough, how to do asynchronous, how to do the isomorphism of these very common problems, the official did not give a detailed explanation. There are a lot of store,view and repetitive code, such as the action of the fast expansion. This will inevitably lead to a pile of "improved" wheels. There are some very flash, such as Redux,reflux,marty. Reflux and Marty Basically just remove the duplicate code and add some flexibility to the existing store,action, it is easier to use than the original flux, but the overall two do not jump out of flux, a lot of the "traditional" is still implemented by the Mixin way. If the project is not very complicated, you can try it. As for Relay, because of the need for back-end GRAPHQL support, cost switching is a bit high for legacy projects developed with the REST interface and for large teams that are separated from front to back.

Now start talking about the protagonist Redux today. Redux from Flux evolved, and later inspired by ELM, removed the complexity of flux, to now more and more from the faction, and even has the realization of Angular. Recently, the group's old Pure Flux development project has been gradually migrated to Redux. Redux is also adhering to the Flux unidirectional data stream, Store is the one of the single source of truth ideas, these two points skipped. Let's talk about other sensations in the process of using Redux.

Features and benefits document clear, Unified coding

Redux documents are very clear and meticulous, which helps to unify the team coding style, saving a lot of tangled and pit time. It's no longer a struggle for Ajax requests, all of which are thrown into action (universal can also be put into middleware). Are you using state or props? All of the components use props, only the state is used in the top-level assembly. Previously for flexibility or compatibility, Redux's provider provided Provider decorator adorners and provider two invocation usages, and it is now only recommended to use Provider decorator. Redux This design idea is very similar to Python's:

There should is one, and preferably only one-obvious-to-do it.

You'll find that with Redux, the entire team writes a consistent code style, and the last time it was a project moved from the old JQuery component to the React. What if there are some scenes that you still struggle with? Go to Redux issues to mention a issue, and soon someone will reply.

State, State, state--Store

The front-end complexity lies in the view,view complexity of state processing. The state is complex because it includes the data returned by AJAX, which tab is currently displayed, and other UI states, form status, and even the current URL. Redux these all state into a large object, a name called Store , yes, Flux Store . Just Redux limit one app to only one Store . StoreThe single benefit is that all the data results are centralized, convenient operation, as long as it is passed to the outermost component, then the inner component does not need to maintain state, all the parent from props down. Subcomponents become exceptionally simple.

Reducer

Only one Store , the first feeling is this Store object will be very large? In fact, the object is not scary, scary is the object processing logic put together. As long as these processing logic by the processing of the content of the split is not OK?! Each piece of processing logic after splitting is one Reducer . Putting Reducer together each piece of content (with ES6 's import syntax) makes up the whole Store . Reducerjust a pure function, so it's easy to test. Referring Reducer to the need to mention functional programming, the essence of reducer is to do object format conversion, which is very efficient with functional operation.

(previousState, action) => newState

Because it is a pure function, combining multiple reducer is very simple, see https://gist.github.com/gaearon/d77ca812015c0356654f. By the way also removed the most reviled grammar in Flux waitFor .

Action

Redux's action is similar to Flux in that it is the carrier that expresses the view to change the store content. Flux is removed by a unified Dispatcher distribution Action,redux Dispatcher , using the store store.dispatch() method to pass the action to the store. As all action handlers go through this store.dispatch() approach, Redux intelligently uses this to implement middleware mechanisms similar to those of the Koa,ruby Rack. Middleware allows you to intercept and insert code before you reach the store after dispatch action, allowing you to manipulate the action and store. Flexible log printing, error collection, API requests, routing, and more are easy to implement. Our team directly sends an AJAX request directly here based on the pre-established action and the mapping between requests, and from now on the hemp no longer has to worry about my asynchronous fetching of data.

In addition to these, there is the inverse of the DevTools, which allows applications to be recorded and replayed like a VCR.

There is also good support for homogeneous application Redux, a team that is investigating, and then sharing after the actual line.

Insufficient or inconvenient

Of course, the use of some of the process is not smooth, in fact, the main or ideological changes.

Components should be as stateless as possible

This is also known as the choice between Smart Component and Dumb Component, and component library development should be made as Dumb Component as possible. This is very different from the traditional JQuery class using imperative syntax for component development. such as writing a dialog,jquery component is generally provided dialog.show() , dialog.hide() method. But Redux requires that the show or hide should be treated as a props, controlled by an external pass-through. Redux is more stringent than Flux is the uniqueness of the Store as a source of data, so the previously available components are now found to be directly unavailable.

Processing of rotation and WebSocket requests

The initiation of the request is done in action, but the requested pause/start state is placed in the store, adding some complexity but ensuring consistency of the data. In fact, it is not clear that store is the idea of a single data source.

Information:

Official address: Https://github.com/rackt/redux
English Document: Http://github.com/camsong/redux-in-chinese
Project list: Https://github.com/xgrommx/awesome-redux
isomorphism Example: http://react-redux.herokuapp.com/

Yes, I heard that the Chinese document translation is also good, even Redux author Dan Abramov All pushed, or you can also see.

Still tangled in Flux or Relay, maybe Redux is better for you