How to Use Redux as a Beginner

Arvin Fernandez
Apr 21 · 4 min read

Redux is a JavaScript library used for application state management. It can be used with any UI library but this post will be discussing its usage in React. In a nutshell, the library maintains the immutable state of the application in a single object. Immutable simply means it can't be changed directly. Instead, it goes through the ‘redux flow’ which ends up returning a new state object and replacing the old state. Before beginning to use Redux you must first understand React. If you have no idea how React works here is a video that explains the framework very well. With that out of the way, let's learn some Redux!

Setting It Up

If you haven’t already installed redux in your application you can do so by running the npm install redux react-redux . This will give access to a bunch of modules necessary to implement redux in your app.

Reducers

You can think about reducers as the setState function in React. They are simply pure functions that take in previous state and an action object as an argument then returns the new state.

example of simple reducer

We will go more in depth about what actions are further down the road but for now just think about them as instructions. The reducer takes in the action and matches the type to one of the cases. Then returns a new state which is assigned to the global state of redux. If we had another key in our state we would have to change our return to something like:

{...state, tickets: state.tickets + 1}

Otherwise we would lose the other data in state when updating the tickets value.

Actions

This is where you pass in the information necessary to update state. An action is a plain old object with a key of type and payload. The type tells the reducer what action it should take and the payload is the data that your reducer will use to update state. An action can be written manually each time you want to make a change to state. However, it is best practice to have a separate folder of functions that return these actions called action creator. It keeps the separation of concerns and saves time debugging misspelled action types.

Connecting Components to Redux Store

Once you have your actions and reducers we can begin setting up our store.

//index.jsimport { Provider } from "react-redux";import { createStore } from "redux";import myReducer from "./reducers/myReducer";

First we want to create our store.Whenever a store is created in Redux, you need to specify the reducer. This is where we will be storing our state.

const store = createStore(myReducer)

Second we want to wrap our top level component, App, in the Provider component and pass it the store we just created above. This will give access to store to all the components nested within App. Giving them the ability to read and update state regardless of their hierarchical position.

ReactDOM.render(  <Provider store={store}>    <App />  </Provider>,  document.getElementById('root'));

mapStateToProps & mapDispatchToProps

While the Provider is giving all the components access to store there is one more step we must take. The connect function comes from react-redux module and accepts two arguments. The first argument is two callback functions and the second is the component you wish to connect.

mapStateToProps is used to read data from the store. First you must define the function. Now this function would be receiving state as an argument and must return an object. In that return value is where you will specify what data from the store you want to pass down to the component.

const mapStateToProps = state => {
return {
data1: state.first,
data2: state.second
}
}

This object will then be spread onto the props of the component and can be accessed just like any other props. If you want access to the entire state, simply return state.

mapDispatchToProps is what is used to change state by dispatching actions. Just like the first argument this too must be defined. However, instead of state as an argument it will be receiving dispatch. Dispatch is a function from the store that accepts an action as an argument. It is the only way to trigger a state change in Redux. Similar to mapStateToProps this function must return an object that will be passed down to the desired component as props but instead the values will be callback functions.

const mapDispatchToProps = (dispatch) => {
return {
// dispatching plain actions
increment: () => dispatch({ type: 'INCREMENT' }),
decrement: () => dispatch({ type: 'DECREMENT' }),
reset: () => dispatch({ type: 'RESET' }),
}
}

Conclusion

You might not see the benefit of using Redux right away if you are building simple apps but you can imagine how messy your components can get. Having to pass down callback props to change state. Not everyone is a fan of Redux because it doesn’t add anything that cant already be done with React. I personally found it very helpful in my projects and helped organize my code much better. How do you feel about Redux?

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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