{"id":15020344,"url":"https://github.com/simplelegal/react-fetch-flow","last_synced_at":"2025-12-26T11:57:23.956Z","repository":{"id":57234581,"uuid":"115667943","full_name":"SimpleLegal/react-fetch-flow","owner":"SimpleLegal","description":"A framework for fetching initial data on page load","archived":false,"fork":false,"pushed_at":"2018-07-16T18:22:46.000Z","size":609,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-08T09:52:49.612Z","etag":null,"topics":["fetching-data-from-server","hoc","middleware","opinionated-framework","react","react-router","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimpleLegal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-28T23:39:21.000Z","updated_at":"2022-01-31T19:11:52.000Z","dependencies_parsed_at":"2022-09-15T02:02:07.111Z","dependency_job_id":null,"html_url":"https://github.com/SimpleLegal/react-fetch-flow","commit_stats":null,"previous_names":["darrendahl/fetch-flow","simplelegal/fetch-flow"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimpleLegal%2Freact-fetch-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimpleLegal%2Freact-fetch-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimpleLegal%2Freact-fetch-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimpleLegal%2Freact-fetch-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimpleLegal","download_url":"https://codeload.github.com/SimpleLegal/react-fetch-flow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238183643,"owners_count":19430161,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fetching-data-from-server","hoc","middleware","opinionated-framework","react","react-router","redux"],"created_at":"2024-09-24T19:54:56.711Z","updated_at":"2025-10-25T17:30:33.098Z","avatar_url":"https://github.com/SimpleLegal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-fetch-flow\nA framework for fetching initial data on page load\n\n[Sandbox Demo](https://codesandbox.io/s/5v89j55yj4)\n\n### Why\n\nFetching data on page load in React Single Page Applications is not straightforward. \n\nYou must set loading states, use component lifecycle methods to fetch, while making sure you dont fetch data too often (or not enough) when the user navigates around your application. \n\nThe result is a bug prone implementation that you have to think through a lot to get right (and you shouldn't have to)!\n\nThis library solves this problem.\n\n### What\n\nReact Fetch Flow is a higher order component (HOC), middleware, and a simple reducer that takes care or setting loading states, client side routing behavior (as it relates to loading), and data fetching. \n\nIt follows a philosophy to make the implementation simple and intuitive for the user. This philosophy is that the user wants the most up to date data as they navigate throughout the application without having to refresh the page, unless they explicitly say so (for instance, the user presses back). So, react-fetch-flow will fetch data and set loading states whenever they push to browser history, and no other time. \n\nThis philosophy leads to a straightforward implementation that is intuitive for the user. \n\nThe redux version has more features than the simple react version. Because you can navigate across the application and keep state in the store, the user can update state on one route, then navigate, then if user presses 'back' they will get the previous state. \n\nUse npm or yarn to add:\n\n```yarn add react-fetch-flow```\n\n```npm install react-fetch-flow --save```\n\n### How to integrate with only React\n\n```javascript\nimport React from 'react'\nimport { withFetchFlow } from 'react-fetch-flow'\nimport Loading from './Loading'\nimport { onRequest } from \"./api\";\n \n@withFetchFlow({\n  component: \u003cLoading /\u003e,\n  flag: \"todos\",\n  onRequest //expects function that returns promise\n})\nclass Todo extends React.Component {\n  render(){\n    return (\n      \u003cdiv\u003e{this.props.todos.map(todo =\u003e \u003ch2\u003etodo.name\u003c/h2\u003e)}\u003c/div\u003e\n    )\n  }\n}\n\n```\n\n### How to integrate with Redux\n\nThere are 3 steps in order to get started:\n\n#### 1. Import Middleware\n\nThis manages when to set loading states. You will need to set up your request actions to have ```_REQUESTED``` and ```_SUCCESS``` in order for this to work properly. \n\n```javascript\n\nimport { fetchFlowMiddleware } from 'react-fetch-flow'\n\nconst middleware = [fetchFlowMiddleware] //add more if needed=\n\nconst store = createStore(\n  rootReducer, // new root reducer with router state\n  {},          // initialState\n  applyMiddleware(...middleware)\n)\n\n```\n\n#### 2. Import Reducer\n\nThese will contain the loading states used by the HOC\n\n```javascript\nimport { combineReducers } from 'redux'\nimport {loadingReducer} from 'react-fetch-flow'\n\nconst rootReducer = combineReducers({\n  //...other reducers\n  loading: loadingReducer\n})\n\n ```\n \n #### 3. Import Higher Order Component\n \nApply the HOC to your container components that you want to have fetching responsibility, generally the component that your react-router ```\u003cRoute /\u003e``` component renders. \n \n \n ```javascript\n \n import React from 'react'\n import { withReduxFlow } from 'react-fetch-flow'\n import * as ACT from 'actions/actionTypes'\n import Loading from './Loading'\n \n @withReduxFlow({\n   component: \u003cLoading /\u003e, // loading component\n   flag: \"todo\",                  // loading and loaded flag identifiers\n   getFetchAction: props =\u003e ({ // put action that will be dispatched - follows _REQUESTED / _SUCCESS \n     type: ACT.INIT_TODOS_LIST_REQUESTED,\n     payload: {\n       todoId: props.match.params.todoId\n     }\n   })\n})\n@connect(({todos}) =\u003e {\n   return {\n     todo: todos.currentTodo\n   }\n})\nclass Todo extends React.Component {\n  render(){\n    return (\n      \u003cdiv\u003e{this.props.todo.name}\u003c/div\u003e\n    )\n  }\n}\n \n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplelegal%2Freact-fetch-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimplelegal%2Freact-fetch-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplelegal%2Freact-fetch-flow/lists"}