1. Introduction

In this tutorial, we'll learn how to connect your Redux store with your React components using the 'react-redux' library. We'll go through the process of making your components interact with the global state.

By the end of this tutorial, you will be able to:

• Understand how Redux works with React
• Connect Redux to a React application
• Make your components interact with the global state

Prerequisites: Basic knowledge of React and Redux.

2. Step-by-Step Guide

Firstly, let's install the necessary packages using npm:

npm install --save redux react-redux

Concept of Redux

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

Connecting Redux to React

To connect Redux to our React app, we need to wrap the entire application with the Provider component from react-redux, and pass our store as a prop.

3. Code Examples

Here’s an example of how to connect Redux to your React app:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

// Reducer function
function reducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    default:
      return state;
  }
}

// Create a Redux store
let store = createStore(reducer);

ReactDOM.render(
  // Wrap the App in the Provider component and pass in the store
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

In the above example, createStore is used to create the Redux store. We pass our reducer to this function. The Provider component makes the Redux store available to any nested components that have been wrapped in the connect() function.

4. Summary

In this tutorial, we learned how to:

• Install the necessary packages to use Redux with React
• Understand the basic concept of Redux
• Connect Redux to a React application
• Make your components interact with the global state

The next steps would be to learn how to create actions and dispatch them. You can then learn how to handle these actions in your reducers and update the state.

5. Practice Exercises

1. Create a simple counter app using Redux and React. The counter should have an increment and a decrement button.

Solution:

import React from 'react';
import { connect } from 'react-redux';

const Counter = (props) => (
  <div>
    <p>{props.count}</p>
    <button onClick={props.increment}>+</button>
    <button onClick={props.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);

1. Extend the counter app to include a reset button that sets the count back to zero.

Solution:

import React from 'react';
import { connect } from 'react-redux';

const Counter = (props) => (
  <div>
    <p>{props.count}</p>
    <button onClick={props.increment}>+</button>
    <button onClick={props.decrement}>-</button>
    <button onClick={props.reset}>Reset</button>
  </div>
);

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

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

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

In the above code, connect() function connects the React component to the Redux store. It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store. It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.