The Project | About Us | Contribute | Donations | License

HOME

In this section, we will explore Redux, a popular state management library for JavaScript applications. Redux is often used with React to manage the state of the application in a more predictable and maintainable way.

What is Redux?

Redux is a predictable state container for JavaScript applications. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. Redux is based on three core principles:

Single Source of Truth: The state of your whole application is stored in an object tree within a single store.
State is Read-Only: The only way to change the state is to emit an action, an object describing what happened.
Changes are Made with Pure Functions: To specify how the state tree is transformed by actions, you write pure reducers.

Setting Up Redux

To get started with Redux in a React application, follow these steps:

Step 1: Install Redux and React-Redux

First, you need to install Redux and React-Redux, which is the official React binding for Redux.

npm install redux react-redux

Step 2: Create a Redux Store

A store is an object that holds the application's state. You can create a store using the createStore function from Redux.

// src/store.js
import { createStore } from 'redux';

// Define an initial state
const initialState = {
  count: 0
};

// Define a reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// Create a store
const store = createStore(reducer);

export default store;

Step 3: Provide the Store to Your React Application

To make the Redux store available to your React components, you need to use the Provider component from React-Redux.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

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

Step 4: Connect React Components to the Redux Store

To connect a React component to the Redux store, you can use the connect function from React-Redux. This function allows you to map the state and dispatch to the props of your component.

// src/components/Counter.js
import React from 'react';
import { connect } from 'react-redux';

const Counter = ({ count, increment, decrement }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={increment}>Increment</button>
    <button onClick={decrement}>Decrement</button>
  </div>
);

const mapStateToProps = (state) => ({
  count: state.count
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Step 5: Use the Connected Component in Your Application

Finally, you can use the connected component in your application.

// src/App.js
import React from 'react';
import Counter from './components/Counter';

const App = () => (
  <div>
    <h1>Redux Counter</h1>
    <Counter />
  </div>
);

export default App;

Practical Exercise

Exercise: Create a Todo List with Redux

Setup: Create a new React application and set up Redux as described above.
Define State: Define the initial state for your todo list.
Create Actions: Create actions for adding and removing todos.
Create Reducer: Create a reducer to handle the actions.
Connect Components: Connect your components to the Redux store.

Solution

// src/store.js
import { createStore } from 'redux';

const initialState = {
  todos: []
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] };
    case 'REMOVE_TODO':
      return { ...state, todos: state.todos.filter((todo, index) => index !== action.payload) };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

// src/components/TodoList.js
import React, { useState } from 'react';
import { connect } from 'react-redux';

const TodoList = ({ todos, addTodo, removeTodo }) => {
  const [todo, setTodo] = useState('');

  const handleAddTodo = () => {
    addTodo(todo);
    setTodo('');
  };

  return (
    <div>
      <input
        type="text"
        value={todo}
        onChange={(e) => setTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo} <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

const mapStateToProps = (state) => ({
  todos: state.todos
});

const mapDispatchToProps = (dispatch) => ({
  addTodo: (todo) => dispatch({ type: 'ADD_TODO', payload: todo }),
  removeTodo: (index) => dispatch({ type: 'REMOVE_TODO', payload: index })
});

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

// src/App.js
import React from 'react';
import TodoList from './components/TodoList';

const App = () => (
  <div>
    <h1>Redux Todo List</h1>
    <TodoList />
  </div>
);

export default App;

Conclusion

In this section, we introduced Redux and set up a basic Redux store in a React application. We covered the core principles of Redux, how to create a store, and how to connect React components to the Redux store. We also provided a practical exercise to create a todo list application using Redux. In the next section, we will dive deeper into actions and reducers, which are essential for managing state changes in Redux.

Redux: Introduction and Setup

What is Redux?

Setting Up Redux

Step 1: Install Redux and React-Redux

Step 2: Create a Redux Store

Step 3: Provide the Store to Your React Application

Step 4: Connect React Components to the Redux Store

Step 5: Use the Connected Component in Your Application

Practical Exercise

Exercise: Create a Todo List with Redux

Solution

Conclusion

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application