\n\n\n# Redux Network Layer (Redux NL)\n\nRedux Network Layer is a network layer for your application powered by redux and redux-saga heavily inspired by GraphQL clients such as react-relay. This libary follows the [Flux Standard Action](https://github.com/redux-utilities/flux-standard-action) specification for redux actions.\n\n## Prerequisites\n\nThis library requires that you have both [redux](https://redux.js.org/) and [redux-saga](https://redux-saga.js.org/) setup in your project.\n\n## Setup\n\n```sh\nnpm install redux-nl\n```\n\nFor ReduxNL to work correctly you need to run the `ReduxNL.setup` and add the action reduccer. Redux NL is powered by [redux-saga](https://redux-saga.js.org/), below is a basic setup for redux-saga and your redux store.\n\n```js\nimport { ReduxNL, ActionReducer } from \"redux-nl\";\nimport {applyMiddleware, combineReducers, createStore} from 'redux';\nimport createSagaMiddleware from 'redux-saga';\n\nconst reducers = combineReducers({\n action: ActionReducer,\n ...\n});\nconst sagaMiddleware = createSagaMiddleware();\nconst middleware = applyMiddleware(...[sagaMiddleware]);\nconst store = createStore(reducers, middleware);\n\nReduxNL.setup(store, sagaMiddleware, {\n defaultUrl: \"https://example.com\",\n delay: 1000, // <--- adds a network delay for testing slow connections\n isDev: false // <--- Things like delay and console.warns will be ignored when this is false\n defaultErrorMessage: \"..\" // <--- Custom fallback message\n});\n```\n\nThe ReduxNL action reducer records a temporary instance of you latest action fired into the redux store, this allows us to provide the smart ReduxNL callbacks inside our React components. You need to add the following to your `combineReducers` function:\n\n```js\nimport { ActionReducer } from \"../libs/redux-nl\";\n\nconst reducers = combineReducers({\n action: ActionReducer,\n ...\n```\n\n## Usage\n\nReduxNL allows you to make request from your React components (or outside your react components) and listen to the status of that request... the only difference is that ReduxNL dispatches the request result to the Redux store, allowing you to also update your global state.\n\nThe below example allows you to update your component in response to the fired request. You can pass paramters via the `payload` and `meta` properties, these will be used in your network request, more details below.\n\n```js\nReduxNL.post(\"/user/brands/slug\", {\n payload: { slug },\n meta: {\n apiToken: authToken\n },\n onSuccess: (action) => {\n\n },\n onFailure: (action) => {\n\n },\n onFinal: (action) => {\n\n }\n});\n\n// -- You can also write the call as a promise --\n\nReduxNl.promise.post(\"/user/brands/slug\").then(...).catch();\n\n// OR...\n\ntry {\n const action = await ReduxNl.promise.post(\"/user/brands/slug\");\n} catch(action){\n // Handle error\n} finally {\n // Do something\n}\n\n```\n\nThe above example will dispatch a `CreateUserBrandSlugResponse` to the store once the request has completed (success or failure). You can listen to these actions in your reducer by using the redux-nl utilities:\n\n```js\nconst CreateBrandResponse = ReduxNL.response.type.post(\"/user/brands/slug\");\nconst InitialState = {\n data: [],\n updatedAt: null\n};\n\nexport default (state = InitialState, action) => {\n switch (action.type) {\n case CreateBrandResponse: {\n ...\n```\n\nAvailable methods for fetching the action type string:\n\n```js\nconst CreateBrandResponse = ReduxNL.response.type.post(\"/user/brands/{slug}\") -> CreateUserBrandsSlugResponse\nconst UpdateBrandResponse = ReduxNL.response.type.patch(\"/user/brands/{slug}\") -> UpdateUserBrandsSlugResponse\nconst DeleteBrandResponse = ReduxNL.response.type.delete(\"/user/brands/{slug}\") -> DeleteUserBrandsSlugResponse\nconst FetchBrandResponse = ReduxNL.response.type.get(\"/user/brands/{slug}\") -> FetchUserBrandsSlugResponse\nconst PutBrandResponse = ReduxNL.response.type.put(\"/user/brands/{slug}\") -> PutUserBrandsSlugResponse\n\nconst CreateBrandRequest = ReduxNL.request.type.post(\"/user/brands/{slug}\") -> CreateUserBrandsSlugRequest\nconst UpdateBrandRequest = ReduxNL.request.type.patch(\"/user/brands/{slug}\") -> UpdateUserBrandsSlugRequest\nconst DeleteBrandRequest = ReduxNL.request.type.delete(\"/user/brands/{slug}\") -> DeleteUserBrandsSlugRequest\nconst FetchBrandRequest = ReduxNL.request.type.get(\"/user/brands/{slug}\") -> FetchUserBrandsSlugRequest\nconst PutBrandRequest = ReduxNL.request.type.put(\"/user/brands/{slug}\") -> PutUserBrandsSlugRequest\n\n```\n\n### Building URLs\n\n#### Request Parameters\n\nAll paramters in `payload` are passed as data to POST, UPDATE and DELETE requests.\n\n```js\nReduxNl.post(\"/user/brands\", {\n payload: {\n hasCredit: false,\n },\n meta: {\n apiToken: \"...\",\n }\n});\n```\n\nWill be mapped into the request as such:\n\n```\nPOST https://my-example-api//user/brands?apiToken=...\n{\n hasCredit: true\n}\n```\n\n#### Request Headers\n\nYou can add headers in the meta object of your request.\n\n```\n{\n ...\n meta: {\n headers: {\n ... <---\n }\n }\n}\n```\n\n#### Query Parameters\n\nQuery parameters e.g. `https://my-example-api/user?apiToken=...\"` are automatically added to the URL via the `meta` key. i.e.\n\n```js\nReduxNl.post(\"/user/brands\", {\n meta: {\n date: \"2020-11-21\",\n token: \"rAHO82BrgJmshpIHJ8mpTVz2vvPyp1c0X1gjsn6UYDx\",\n },\n});\n```\n\nThe call above will result in a URL as such `/user/brands?date=2020-11-21&token=rAHO82BrgJmshpIHJ8mpTVz2vvPyp1c0X1gjsn6UYDx`.\n\n#### Route Parameters\n\nRoute parameters are dynamically replaced. Take the following path: `/user/brands/id`, when a value with the key of `id` is passed thorugh the `payload`, then it is automatically replaced in the URL e.g. `/user/brands/id` -> `/user/brands/34`.\n\n#### Local Chaining\n\nIn some cases, you may want to pass values from a Request through to a response, so it can be used in your reducer. To support this the network saga supports a `chain` method. i.e.\n\n```js\nReduxNl.post(\"/user/brands\", {\n meta: {\n chain: {\n ...\n }\n }\n});\n```\n\nAny data inside the `chain` object will be passed through to the `CreateUserBrandsResponse`.\n\n#### Replace Type (Without Route Parameters)\n\nFor APIs without route parameters (i.e. APIs with no path), include a `replaceType` to differentiate the action type. i.e.\n\n```js\nReduxNl.post(\"\", {\n payload: {\n hasCredit: false,\n },\n meta: {\n apiToken: \"...\",\n },\n replaceType: \"login\"\n});\n```\n\nThis will dispatch a `CreateLoginResponse` to the store once and you can listen to this action in your reducer.\n\n### Resources\n\nSee [extract-your-api-to-a-client-side-library-using-redux-saga](https://medium.com/@lukebrandonfarrell/network-layer-extract-your-api-to-a-client-side-library-using-redux-saga-514fecfe34a7) to learn more about the architecture behind this library.\n","readmeFilename":"README.md"}
![](\"https://raw.githubusercontent.com/aspect-apps/redux-ql/master/assets/thumbnail-dark-redux-ql.png\")
\n ![\"version\"](\"https://img.shields.io/npm/v/redux-nl.svg?style=flat-square\")
\n \n \n ![\"license\"](\"http://img.shields.io/npm/l/redux-nl.svg?style=flat-square\")
\n \n \n ![\"downloads\"](\"http://img.shields.io/npm/dt/redux-nl.svg?style=flat-square\")
\n \n\n