Connecting To Redux Store

First What Is Redux, State and Store?

Redux is an open-source javascript library for managing and centralizing an applications state. It’s predictable therefore making your applications easier to test and debug. It is mainly used with react. What does it mean to centralize a state, what even is a state and where is it centralized exactly? I have asked my self those questions so I’m sure someone else has them. Here are the answers, state refers to the entire state of a redux application which is often a deeply nested object. The state is centralized in the store, let’s look at an image to try and make sense of the store.

As we can see from the diagram redux allows a component even at the very bottom of the tree to have access to the state that is stored in the store! That’s way better than having to go component by component to get there.

Connecting To The Store

In order for our components to have access to the store and state we need to make a connection between the two. How do we do that? We import Provider from “react-redux” and we wrap our application with it.

// ./src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux"; /* code change */
import counterReducer from "./reducers/gymReducer.js";
import App from "./App";
import "./index.css";

const store = createStore(
  gymReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
); 

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

Using the <Provider> component provided by the React Redux library, we gave our components the ability to be connected to the store. However, we don't want every component re-rendering in response to every change in the state. So the React Redux library requires us to specify which changes to the store's state should prompt a re-render of the application. We will specify this with the connect() function. So now whatever component we want to have access to the store should be importing connect.

We also must export our component at the bottom with connect so it knows which components state to update when need be.

Now that we have connect all set up I’m sure you see my mapStateToProps function inside the connect function, now we can finally jump into it. Also the {fetchGyms} is a mapDispatchToProps function if you’d like to learn more I’ll link to it.

mapStateToProps

With mapStateToProps you write it out as a function to tell your store exactly which portion of the state you want.

This says I want the gyms from the state, this allows my component to have access to all the gyms through a props called gyms example: “this.props.gyms”. Now my component has access to all the gyms and their properties. You can do this for every component that needs access to the store just tell it which portion you want in your mapStateToProps function.

Conclusion

I hope this blog has cleared up some of the questions you had, definitely always look at documentation which I have linked throughout this blog. As always I’ve learned as I write these blogs and I really enjoy it. Thanks for reading!