Implementing a React Progress Bar Managed Through Redux

Using <TopBarProgress /> for easy progress bar mounting

A Little About Progress Bars

React TopBar Progress Indicator

npm install react-topbar-progress-indicator
import TopBarProgress from "react-topbar-progress-indicator";...   render() {
return(<TopBarProgress />)
}
...

1. Configuring ProgressBar.js

2. Importing ProgressBar into App.js

...
import { HandleProgressBar } from "./ProgressBar";

class App extends Component {
render() { const { cookies } = this.props; return (
<div>
<HandleProgressBar />

<Switch>
<Route />
<Route />
</Switch>
</div>
)
}

3. Configuring Redux Action and Reducer

...export const setProgressBar = (isOpen) => (
{
type: 'SET_PROGRESS_BAR',
isOpen: isOpen
});
...
export const ui = (state = {}, action) => {  switch (action.type) {    case 'SET_PROGRESS_BAR':
return Object.assign({}, state, { progressBarStatus: action.isOpen });

default:
return state;
}
};
export default ui

Bar Style

Programmer and Author. Director @ JKRBInvestments.com. Creator of LearnChineseGrammar.com for iOS.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store