React, Redux and Thunk

While learning how to use React was still pretty much putting me in my stretch zone, I came to a bit of a haul when I had to incorporate Redux to it. Going to write about a few pointers that I learnt so I can understand it better myself.

What does Redux do?
Let’s talk about redux and why do we use it in React. Without going into details about react, we know that React consists of parent and child components. But it could also have siblings, cousins and other components where you will constantly need to pass props. That would just get tiring after a while. A simple rule would be to incorporate redux if you see yourself passing down props too often. Redux basically saves the state of your component globally. This means that you can pass down props to whatever components by using connect().

Reducers
By using Redux, you use reducers to change the state of your components. Like for example, adding a number to the count or decreasing it etc. You can also use combineReducers() if you have many reducers.

State changes are based on a user’s interaction. If the application’s state is managed by Redux, the changes happen inside a reducer function — this is the only place where state changes happen. The reducer function makes use of the initial state of the application and something called action, to determine what the new state will look like.

Actions
The state update that happens in the reducer is always dependent on the value of action.type. The state is not meant to be changed directly. To create an updated state, we can make use of Object.assign or opt for the spread operator.

const contactReducer = (state, action) => {   
switch (action.type) {
case 'NEW_CONTACT':
return Object.assign({}, state, {
contacts: [
...state.contacts,
action.payload ]
})
default:
return state
}
}

Here by using Object.assign, we make sure we are not replacing the old state, instead we are creating a new object which is filled with the state that is passed to it and the payload sent by the user.

Connect()

Connect is a function we get from react-redux that helps us to connect our component to the store, all you need to do is import it and then add the following:

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent)

So connect() takes in two arguments, the first argument (which is necessary and should be passed in as “null” if you choose to not pass anything) is a function that lets us get the current state from the store and the second argument (optional) is a dispatch function mapDispatchToProps which is used for dispatching actions to the store.

With React Redux, your components never access the store directly, "connect" does it for you. You don’t need to specifically type in the mapDispatchToProps, you can just type in { yourFunction } in your connect() second argument.

How does our app have access to connect?

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

The line <Provider store={store}> gives all our components the access to the store and thereby lets us use connect() in our components.

Thunk

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

In conclusion, I think using redux is a great way of handling global state instead of passing props around as that can get tedious after a while. To get really good at it, make sure to practice like I would be doing.

--

--

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