The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

State Management with Redux

Next ►
►

State management is a crucial aspect of building scalable and maintainable applications. Redux is a popular library for managing application state in JavaScript applications, especially those built with React. In this section, we will cover the basics of Redux, how to integrate it with a React application, and some advanced concepts.

Table of Contents

  1. What is Redux?
  2. Core Concepts of Redux
  3. Setting Up Redux
  4. Actions and Action Creators
  5. Reducers
  6. Store
  7. Connecting Redux to React
  8. Practical Example
  9. Exercises
  10. Summary

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.

Key Features:

  • 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.

Core Concepts of Redux

Actions

Actions are payloads of information that send data from your application to your Redux store. They are the only source of information for the store.

Reducers

Reducers specify how the application's state changes in response to actions sent to the store. Remember that actions only describe what happened, but don't describe how the application's state changes.

Store

The store is the object that brings actions and reducers together. The store has the following responsibilities:

  • Holds application state
  • Allows access to state via getState()
  • Allows state to be updated via dispatch(action)
  • Registers listeners via subscribe(listener)

Setting Up Redux

To get started with Redux, you need to install the Redux library and the React-Redux bindings.

npm install redux react-redux

Actions and Action Creators

Actions are plain JavaScript objects that have a type property. Action creators are functions that create actions.

// actions.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export const increment = () => ({
  type: INCREMENT,
});

export const decrement = () => ({
  type: DECREMENT,
});

Reducers

Reducers are functions that take the current state and an action as arguments, and return a new state.

// reducers.js
import { INCREMENT, DECREMENT } from './actions';

const initialState = {
  count: 0,
};

const counterReducer = (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;
  }
};

export default counterReducer;

Store

The store is created using the createStore function from Redux.

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

const store = createStore(counterReducer);

export default store;

Connecting Redux to React

To connect Redux to a React application, you need to use the Provider component from React-Redux and the connect function to connect your components to the Redux store.

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
// App.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

const App = ({ 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 = {
  increment,
  decrement,
};

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

Practical Example

Let's create a simple counter application using Redux.

  1. Define Actions: Create action types and action creators.
  2. Create Reducer: Define how the state changes in response to actions.
  3. Create Store: Use createStore to create the Redux store.
  4. Connect to React: Use Provider to pass the store to the React application and connect to connect components to the store.

Example Code:

// actions.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export const increment = () => ({
  type: INCREMENT,
});

export const decrement = () => ({
  type: DECREMENT,
});

// reducers.js
import { INCREMENT, DECREMENT } from './actions';

const initialState = {
  count: 0,
};

const counterReducer = (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;
  }
};

export default counterReducer;

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

const store = createStore(counterReducer);

export default store;

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

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

// App.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

const App = ({ 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 = {
  increment,
  decrement,
};

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

Exercises

  1. Exercise 1: Add a reset button to the counter application that resets the count to zero.
  2. Exercise 2: Create a new action type and action creator for doubling the count and integrate it into the application.

Solutions

Exercise 1 Solution:

// actions.js
export const RESET = 'RESET';

export const reset = () => ({
  type: RESET,
});

// reducers.js
import { INCREMENT, DECREMENT, RESET } from './actions';

const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        count: state.count + 1,
      };
    case DECREMENT:
      return {
        ...state,
        count: state.count - 1,
      };
    case RESET:
      return {
        ...state,
        count: 0,
      };
    default:
      return state;
  }
};

export default counterReducer;

// App.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement, reset } from './actions';

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

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

const mapDispatchToProps = {
  increment,
  decrement,
  reset,
};

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

Exercise 2 Solution:

// actions.js
export const DOUBLE = 'DOUBLE';

export const double = () => ({
  type: DOUBLE,
});

// reducers.js
import { INCREMENT, DECREMENT, RESET, DOUBLE } from './actions';

const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        count: state.count + 1,
      };
    case DECREMENT:
      return {
        ...state,
        count: state.count - 1,
      };
    case RESET:
      return {
        ...state,
        count: 0,
      };
    case DOUBLE:
      return {
        ...state,
        count: state.count * 2,
      };
    default:
      return state;
  }
};

export default counterReducer;

// App.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement, reset, double } from './actions';

const App = ({ count, increment, decrement, reset, double }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={increment}>Increment</button>
    <button onClick={decrement}>Decrement</button>
    <button onClick={reset}>Reset</button>
    <button onClick={double}>Double</button>
  </div>
);

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

const mapDispatchToProps = {
  increment,
  decrement,
  reset,
  double,
};

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

Summary

In this section, we covered the basics of Redux, including actions, reducers, and the store. We also learned how to connect Redux to a React application using the Provider and connect functions from React-Redux. Finally, we implemented a practical example of a counter application and provided exercises to reinforce the concepts learned.

In the next section, we will dive deeper into advanced topics in Redux, such as middleware and asynchronous actions.

◄ Previous
◄
Next ►
►

JavaScript: From Beginner to Advanced

Module 1: Introduction to JavaScript

Module 2: Control Structures

Module 3: Functions

Module 4: Objects and Arrays

Module 5: Advanced Objects and Functions

Module 6: The Document Object Model (DOM)

Module 7: Browser APIs and Advanced Topics

Module 8: Testing and Debugging

Module 9: Performance and Optimization

Module 10: JavaScript Frameworks and Libraries

Module 11: Final Project

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved