Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sunny250984/redux-data-fetch

digiaonline.github.io/redux-fetch-data
https://github.com/sunny250984/redux-data-fetch

react redux

Last synced: about 2 months ago
JSON representation

digiaonline.github.io/redux-fetch-data

Awesome Lists containing this project

README 

        
# redux-fetch-data



[![Build Status](https://travis-ci.org/digiaonline/redux-fetch-data.svg?branch=master)](https://travis-ci.org/digiaonline/redux-fetch-data)

[![Test Coverage](https://codeclimate.com/github/digiaonline/redux-fetch-data/badges/coverage.svg)](https://codeclimate.com/github/digiaonline/redux-fetch-data/coverage)

[![Code Climate](https://codeclimate.com/github/digiaonline/redux-fetch-data/badges/gpa.svg)](https://codeclimate.com/github/digiaonline/redux-fetch-data)

[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/digiaonline/redux-fetch-data/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/digiaonline/redux-fetch-data/?branch=master)

[![StyleCI](https://styleci.io/repos/58546352/shield?style=flat)](https://styleci.io/repos/58546352)

[![npm version](https://img.shields.io/npm/v/redux-fetch-data.svg)](https://www.npmjs.com/package/redux-fetch-data)

[![npm downloads](https://img.shields.io/npm/dt/redux-fetch-data.svg)](https://www.npmjs.com/package/redux-fetch-data)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/digiaonline/redux-fetch-data/master/LICENSE)



Redux utility library for fetching data using promises on both server and client.



## Install



```bash

npm install redux-fetch-data --save

```



## Usage



### Initial setup



#### On the server



Here is an example setup of a simple server. In this example we used Express, but any server framework will do.



```js

import Express from 'express';

import React from 'react';

import { renderToString } from 'react-dom/server';

import { match, RouterContext } from 'react-router';

import { createStore, combineReducers } from 'redux';

import { Provider } from 'react-redux';

import { fetchDataOnServer, reducer as fetching } from 'redux-fetch-data';

import createHistory from 'react-router/lib/createMemoryHistory';



import routes from '../../routes';



const app = Express();



// Renders the actual HTML page

function renderHtml(html, state) {

  return `

    

    

      

        
${html}


        

      

    

  `;

}



// Register the rendering middleware

app.use((req, res) => {

  const history = createHistory(req.originalUrl);

  const store = createStore(combineReducers({ fetching }));



  match({ routes, location: req.url }, (err, redirect, renderProps) => {

    // Fetch data

    fetchDataOnServer(renderProps, store).then(() => {

      // Data has been fetched, resolve request

      if (err) {

        res.status(500).send(err.message);

      } else if (redirect) {

        res.redirect(redirect.pathname + redirect.search);

      } else if (renderProps) {

        // Render the root component

        const html = renderToString((

          

            

          

        ));



        // Send the rendered page back to the client

        res.status(200).send(renderHtml(html, store.getState()));

      } else {

        res.status(404).send('Not found.');

      }

    });

  });

});



app.listen(3000);

```



#### On the client



Here is an example of a client-side entry script.



```js

import React from 'react';

import { createStore, combineReducers } from 'redux';

import { render } from 'react-dom';

import { Router, browserHistory } from 'react-router';

import { Provider } from 'react-redux';

import { FetchData, reducer as fetching } from 'redux-fetch-data';



import routes from './routes';



// Hydrate the initial state from the server state

const initialState = window.__INITIAL_STATE__;

const store = createStore(combineReducers({ fetching }), initialState);



render(

  

     }

            history={browserHistory}

            routes={routes}/>

  ,

  document.getElementById('root')

);

```



### Fetching data



Instead of loading data in `componentWillMount`, move that logic to a static `fetchData` method.

This method should return a promise. Also, make sure you only fetch data from your containers

(top-level components), and pass down the data as props to sub-components.



```js

export class Foo extends Component {

  static fetchData() {

    // this method should return a promise

  }

  .....

}

```



**Protip!** You can use `Promise.all` to combine multiple promises into one.



## Tests



Run the test suite:



```bash

npm test

```



Run the test suite in watch mode:



```bash

npm run test:watch 

```



Generate the code coverage report:



```bash

npm run test:cover

```



## License



See [LICENSE](LICENSE).