How To Get Started With Redux
Tired of passing props and handling multiple states in different parts of your application? Well, Redux might be just the thing for you. Please note if you do not understand React fluently, I suggest more practice before you dwelve in to Redux!
What is Redux? Redux is a global state container that holds all your states across all your components in a “store”. We will be diving into this concept a little later. But let it be known, that you don’t have to use Redux all the time. You can manage state directly in really simple apps by passing props. Redux just makes the more larger, complex apps much more easier to manage.
The Main Structures of Redux.
Redux uses a one-way data flow structure as illustrated below.

- The react component holds all the action creators such as clicking a button or submitting a form.
- The action will be dispatched by the user and sent to the reducer.
- Arguably the most important part about Redux is the Reducer. The Reducers are pure functions that respond to those actions and determine how those states should change based on the action. Please note that all the states in the store are IMMUTABLE. The reducer will always produce a new state in the store.
- The new state will be sent back to the component and will be rendered accordingly.
How To Setup Redux
First thing we have to do is install Redux.

We are install react-redux since Redux on it’s own has nothing to do with react. There are many applications that use Redux such as Angular and Vue. React-Redux binds the two together.
Setting Up The Store
I assume you are familiar with React and have started up a new create-react-app already. So the first thing we need to do is to set up the store. If you are confused about the instructions below, I will have pictures set up below it.
We should create the store in Index.js. Explanations will follow. To create the store, we have to use
import { createStore } from ‘redux’.
We also create a const store = createStore().
The createStore function generally takes in two arguments. The reducer, which is a function and the initial state.
So now we have to create a reducer. Make a new file called Reducer.js and have the following information.

Please note that the store only holds ONE javascript object. If you have more than one reducer with different states and actions. We can use import { combineReducers } from ‘redux’ and have a constant that holds all the reducers under one variable. This will be covered next time.
Now we have to import the users to our index.js file. Below is what it should look like.

So the next step is how do we have our entire App have access to the store? Now we have to use something called Provider from react-redux. We have to simply import { Provider } from ‘react-redux’ and make it contain our <App /> as seen below.

So now the Provider is our root container and its holding all our states contained in the Store. All our components are displayed in the app so now all components in the app will have access to our store containing the states.
I will go more in depth with functions, getState() and actions in my next blog post!
Thanks for reading!