Connecting React and Redux: A Simple To-Do List Example

Learn how to integrate Redux with a React application by building a simple to-do list. This tutorial provides a step-by-step guide, covering setting up Redux and React-Redux, creating actions and reducers, and managing application state, illustrating the core concepts of Redux in a practical context.

Connecting React and Redux: A Simple Example

Setting up the Project

This tutorial demonstrates a basic integration of Redux with a React application. We'll build a simple to-do list app to illustrate the core concepts. The steps involve creating a new React project, installing Redux and React-Redux, and structuring your project files.

  1. Create a React Project: Use the command npx create-react-app reactproject.
  2. Install Redux and React-Redux: Run npm install redux react-redux --save.
  3. Create Files and Folders: Organize your project into folders for actions, reducers, components, and containers (as shown in the diagram in the original text).

1. Actions

Actions describe *what* happened in your application. They are plain JavaScript objects with a `type` property indicating the action and any necessary data.

Actions (index.js)

// actions/index.js
let nextTodoId = 0;
export const addTodo = (text) => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text,
});
// ... other actions

2. Reducers

Reducers specify *how* the application's state changes in response to actions. They're pure functions that take the current state and an action, returning a new state.

Reducers (index.js)

// reducers/index.js
import { combineReducers } from 'redux';
import todos from './todos';
import visibilityFilter from './visibilityFilter';

export default combineReducers({
  todos,
  visibilityFilter,
});

(The `todos.js` and `visibilityFilter.js` reducers were included in the original text but are omitted here for brevity. They handle updating the todo list and filter state respectively.)

3. Components

These are presentational components. They receive data and callbacks via props and focus solely on displaying information; they don't handle data fetching or updates.

(Examples of `App.js`, `Footer.js`, `Link.js`, `Todo.js`, and `TodoList.js` components were included in the original text but are omitted here for brevity. These components handle rendering the UI elements.)

4. Containers

Containers are smart components that connect to the Redux store. They fetch data from the store and dispatch actions to update the store. They pass data and actions to presentational components.

(Examples of `AddTodo.js`, `FilterLink.js`, and `VisibleTodoList.js` containers were included in the original text but are omitted here for brevity. These containers bridge the gap between the Redux store and the UI.)

5. Store

The Redux store holds the application's state. The `Provider` component makes the store accessible to all connected components without explicitly passing it as a prop.

Store Setup (index.js)

// src/index.js
import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './components/App';
import rootReducer from './reducers';

const store = createStore(rootReducer);

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

Next Topic: React Portals