🔨 WIP: Redux NProgress

Redux Middleware, Reducer, Component & Actions for the most popular progress bar.

Tests will be available soon.

Demo

Installation

npm i --save redux-nprogress

Usage

$3

Import the nprogressMiddleware and include it in applyMiddleware when creating the Redux store.

Example store:

``
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import { nprogressMiddleware } from 'redux-nprogress';
import promiseMiddleware from 'redux-promise-middleware';
import rootReducer from 'reducers/index';

const store = createStore(
rootReducer,
applyMiddleware(
thunk,
nprogressMiddleware(),
promiseMiddleware(),
createLogger()
)
);

export default store;
`




$3

Import reducer and assign it to the nprogress key in your root reducer.

Example root reducer:

`
import { combineReducers } from 'redux';
import { nprogress } from 'redux-nprogress';
import posts from './posts';

const rootReducer = combineReducers({
posts,
nprogress
});

export default rootReducer;
`




$3

To use the middleware, dispatch an action with nprogress property.

`
export function loadPosts() {
return {
type: 'LOAD_POSTS',
nprogress: [
'LOAD_POSTS_FULFILLED',
'LOAD_POSTS_REJECTED'
],
payload: ... // Your application specific promise middleware
};
}
`




$3

Add NProgress component to the root component of your application.

Example:

`
import React from 'react';
import { NProgress } from 'redux-nprogress';
import Header from 'components/Header';

export default function App({ children }) {
return (



);
}
``

More docs will be available soon.
For now just check the source.