Quick Tutorial On How to Start a React-Redux Application

This project is still in development: Built a stock-app with search feature using finnhub.io API.

Example of my index.js file

Step 1:

First off! Install your packages using your code editor of choice. (I personally use VSC.)

npm install redux react-redux redux-thunk react-router -dom --save

Here we are installing quite a few packages:

1. redux: The state container for JS apps
2. react-redux: React bindings for redux
3. redux-thunk: Thunk middleware for asynchronous JS requests. Asynchronous: lines of code processed out of order. This allows the system to process or run other lines of code at the same time it is processing an expensive (or timely) request.
4. react-router: Allows developers to build navigational components in an efficient way.
5. dom: package serves as an entry point to the DOM (document object model).

Step 2

Create an index.js file and import your developer tools (or devtools)

{ createStore, applyMiddleware } from 'redux'

createStore: This will allows us to have a single source of truth that will contain all of our data. Think of it as a store where you can go data “shopping”.

import thunk from 'redux-thunk'

Thunk is our middleware. Remember from above? Asynchronous requests?

import { Provider } from `react-redux`

Provider is our store that provides or connects our store to any nested components. This is useful when using hooks (like I did using react-tables).

It will look like this in your code editor.

Step 3

Next lets set up our store. Whoo! Lets go shopping. :)

1. Create a variable store using let : this is a block scoped local variable meaning the variable will be limited to the scope of the block.

Pass reducer, devtool extension — storeEnhancer — , Middleware, and devtool extension.

//Chain of events: stores global data -> send action object -> reducers decide what to update -> return new store
let store = createStore(portfolioReducer, storeEnhancers(applyMiddleware(thunk)))

2. First wrap your app component in Provider. It will look something like this.

ReactDOM.render(
//strict mode highlights potential problems in application
<React.StrictMode>
{/* Provider component makes Redux store available to any nested components that need access to the Redux store. Here we are providing store as a prop.  */}
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);

You will see above that I wrapped App in StrictMode as well.

Remember this is what provides access to the Redux store for nested components.

All of the above is just the beginning! A simple index.js.

In the future I will plan on building out the rest of this tutorial. Until then I hope you enjoy and please leave constructive criticism if you feel inclined. Thank you.