Pass Store Explicitly Into as a Prop to Connect() in React

Sep 5, 2020 • 5 Minute Read

Introduction

React is used to create an intuitive user interface by following a component-based architecture; hence, it renders data into the DOM. Redux is a way to manage an application-wide state so data can be accessed throughout the app using the connect() function to fetch the data from the root state object.

In this guide, you will learn how to create and pass the store as a prop to the connect() method of Redux.

Passing the Redux Store via Props

The store in Redux is an object that consists of state data for the whole application. This means the root state object resides in the store.

The store is the global state object that can be passed and accessed from any component using the method connect().

Create the store as demonstrated below.

      import { createStore, combineReducers } from "redux";
import { todos } from "../reducers";

export default () => {
  const rootReducer = combineReducers({
    todos
  });

  return createStore(rootReducer);
};
    

The function combineReducers accepts the list of reducers. It creates the combined state object, which represents a store by creating it using createStore() and agrees with the combined reducers object.

The next step is to configure the store in your React app.

      import "./style.css";
import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import App from "./components/App";
import configureStore from "./store";

// Used the store object
const store = configureStore();

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

In the above code snippet, the store, which was created using createStore(), has been imported and then configured using configureStore().

The last step is to spread the root store object to all the components in the React app by passing it to the provider by using store props.

      <Provider store={store}>
    <App />
</Provider>
    

So now, when you want to access the global state or store object in any of the components, you will be able to access it using the connect() method, as demonstrated below.

      export default connect(
  ({ todos }) => ({ todos }),
  {
    addTodo,
    deleteTodo
  }
)(App);
    

Here, connect() is the method used to fetch the data from the store, which allows the component to a global state object, and the reducer data called todos are accessed.

This way, you can create, configure, and pass the global store object and access the data by consuming the connect() method.

Creating the Custom Connect Method to Access the Store

So far in this guide, you have learned the primary way to create the store and access it using the connect() method.

You could also implement a custom connect function. For that, you need to create a custom function, as demonstrated below.

      function connectionWithStore(store, wrapperComponent, ...args) {
  var CoonectWithWrapper = connect(...args)(wrapperComponent)
  return function (props) {
    return <CoonectWithWrapper {...props} store={store} />
  }
}
    

Note that connectionWithStore accepts the store object, wrapper component, and other arguments.

After creating the function, use the connect() method with the required argument along with the wrapper component.

      var CoonectWithWrapper = connect(...args)(wrapperComponent)

And the same component will be returned along with the store props, which are used to access the global store data using a wrapper function.

Next, you can consume the above wrapper function with various arguments such as a store and mapStetToProps as given below.

      const variable_name = connectionWithStore(store, ...others, mapStateToProps)

By doing this, you will be able to access the store even with the connected component where you can pass the store on demand.

Note: *Passing the store explicitly to the connected component will not be visible to other components, but you need to pass the store to make it available for all the components in your app, as given below. *

      <Provider store={store}>
<RootComponent />
</Provider>
    

Conclusion

Redux allows you to structure your data-access mechanism by creating a global state object using the store, making it easily accessible throughout the React app. I hope it has been helpful for you to learn how to pass the store explicitly or using a custom mechanism.