Connecting Redux to React: Why react-redux Exists

The Redux store we built works. Action creators, reducers, subscribe, constants: the full pattern. But every dispatch and every getState() call we wrote was in plain JavaScript, with no React component in sight.

That gap is intentional. And it is exactly what React-Redux closes.

Redux Does Not Know React Exists

Redux is not a React library. It is a state container that works in any JavaScript environment: a Vue app, a Node script, a plain HTML page. That portability is a deliberate design choice.

The tradeoff: Redux has no concept of React components, and React has no concept of a Redux store. They cannot communicate directly.

React-Redux is the official bridge. It is a separate package maintained by the Redux team. Its only job is to give React components a way to read from the Redux store and dispatch actions, without importing the store directly into every file.

ExpandReact-Redux bridge between components and the Redux store

Installation

Three packages to install together:

• redux: the core store, reducer, and dispatch primitives
• react-redux: the bridge that connects React components to the store
• redux-devtools-extension: wires up the browser extension we set up in DevTools

The Folder Structure That Scales

Redux applications need a consistent place for each concept. Here is the folder structure used in real-world React-Redux projects:

Each folder has one job.

actions/ holds every action creator function. Any component that needs to dispatch an action imports the creator from here, not from the component that originally wrote it.

constants/ holds the action type strings as named constants, the same pattern we covered when building the pure Redux store. Keeping them in one folder means both reducers and action creators import from the same source of truth.

reducers/ holds one file per reducer. A large app will have separate reducers for auth, products, cart, and so on. They all live here and get combined before passing to the store.

store/ holds one file: the store setup. This is where createStore is called, the combined reducer is passed in, and DevTools are wired up. Every part of the app that needs the store imports from here.

data/ holds initial state when you are not fetching from a server. If your app loads data from an API on mount, this folder is not needed.

components/ holds every component except App.js. As the app grows, you can create subfolders by feature inside here.

Why This Structure Matters

The structure is not enforced by Redux. Nothing will break if you put everything in one file. But when a team of five people is working on the same application, the answer to "where does this action creator live" should never require reading code. It should be obvious from the folder name.

Conventions are load-bearing. The more predictable your structure, the less time every developer spends on navigation and the more time they spend on the actual problem.

The Essentials

1. Redux is not React-specific. It is a general JavaScript state container. react-redux is the separate package that bridges the two.
2. Three packages together: redux (core), react-redux (bridge), redux-devtools-extension (DevTools wiring).
3. The folder structure separates actions, constants, reducers, store, and components by concern. Large codebases become navigable by convention rather than by reading code.

Further Reading and Watching

• React Redux: Getting Started: official setup guide and API overview
• Redux Essentials, Part 1: Redux Overview: official tutorial walking through the React-Redux setup from scratch
• Full project on GitHub: the complete Task Manager app built across this series, with all async patterns and middleware included. Browse the code without cloning.