Redux-async-connect

Single-page applications usually need to go to a page to get the data of the page, of course React can be done easily, the simplest can be written in Componentwillmount to get the data code:

class MyComponent extends React.Component {    ...    componentWillMount() {        fetchData()    }    ...}

However, since the method of acquiring the data is usually asynchronous, there are some problems that can not be solved well in this process:

1. Cannot freely control the timing of data acquisition: For example, many times we want data to be completed before jumping to this page
2. If a service-side isomorphism is required, the page rendered by the server will have no data-the service-side isomorphism is meaningless.
3. The code to get the page data is mixed with other code and the code is poorly managed
4. Using the Componentwillmount method, the component cannot be written as a stateless component

3, 4 is also relatively good processing, for example, we can use the adorner to extract data from the Componentwillmount method:

// fetchDatafunction fetchDataDecorator(func) {    return async (Component) => {        Component.componentWillMount = () => func()    }}// MyComponent@fetchDataDecorator(fetchData)class MyComponent extends React.Component {    ...}

The above mycomponent can also be written as a stateless component. However, 1, 2 of the problem is not very good to deal with, you can use the idea is to rely on the React-router OnEnter method.

Redux-async-connect is a library for asynchronous fetching, and here's a brief introduction to the library's usage. The library compares the core of an adorner asyncconnect (note that the document on GitHub is a legacy version, if you use a 1.x version after the usage reference is as follows, it will accept a data rather than an object)

import‘redux-async-connect‘@asyncConnect([{    promise: ({ store, helpers }) => fetchData(),    ‘fetch-data-for-my‘}])class MyComponent extends React.Component {    ...}

Asyncconnect accepts an array object, where each object contains a promise property, and if promise is a promise method, it is executed asynchronously and the other optional attribute is key, if a key The request state of the asynchronous request is stored in the store and can be obtained directly from the component via This.props[key], [key].loading represents the request, [key].loaded indicates the request is complete.] The library also supports server-side isomorphism, and the service side can request asynchronous data using the Loadonserver provided by the library.

However, it is a pity that the library only supports the first to get asynchronous data, and so the data request is completed before the page jumps, and some occasions we also want to be able to take the page jump before requesting data, so we need to do a transformation of the library:

Import {Asyncconnect} from' Redux-async-connect '?? Exportdefault  function deferredasyncconnect(items) {?ConstAsyncitems = __client__? Items.map (each + = {?Const{promise, deferred} = each???ConstNewpromise =!deferred?? Async (options) = await promise (options) + = {Promise (options)}??return{? .... each, promise:newpromise}? }): Items?returnAsyncconnect (asyncitems)?}? @deferredAsyncConnect ([{promise: ({store, helpers}) = Fetchdata (),//If want to fetch data deferred, set deferred property to TrueDeferredtrue,}]) class mycomponent extends React. Component {...}

                                                杏树林研发 邹世程

Redux-async-connect