React JS Tutorial: Actions and Reducers 🎯

Welcome back to CodeYourCraft! Today, we're diving into one of the core concepts of React: Actions and Reducers. If you're new to React, don't worry, we'll start from the ground up.

What are Actions and Reducers? 📝

In React, Actions and Reducers are a pattern that helps manage application state. They're crucial for creating dynamic, data-driven user interfaces.

Let's break it down:

Actions

Actions are JavaScript objects that send information from our application to the store. They describe an event that happened, like a user clicking a button.

javascript

// Example of an action
const INCREMENT = 'counter/INCREMENT';
const decrement = () => ({ type: 'counter/DECREMENT' });
const increment = () => ({ type: INCREMENT });

In the above example, we have two actions: decrement and increment. They return an object that contains a type property, which uniquely identifies the action type.

Reducers

Reducers are pure functions that take the current state and an action, and return a new state. They handle the application's data and decide how the state should be updated in response to actions.

javascript

// Example of a reducer
const counter = (state = { number: 0 }, action) => {
  switch (action.type) {
    case INCREMENT:
      return { number: state.number + 1 };
    case DECREMENT:
      return { number: state.number - 1 };
    default:
      return state;
  }
};

In the above example, we have a reducer for a counter application. When the INCREMENT action is dispatched, the reducer increments the current number by 1. Similarly, when the DECREMENT action is dispatched, the number is decremented by 1.

Connecting Actions and Reducers to React Components 💡

To connect actions and reducers to our React components, we'll use a library called react-redux. This library allows us to connect our components to the Redux store and dispatch actions directly from them.

Here's an example of a connected component:

javascript

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

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

const mapStateToProps = state => ({ number: state.number });
const mapDispatchToProps = { increment, decrement };

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

In the above example, we have a Counter component that displays a number and two buttons for incrementing and decrementing it. The connect function from react-redux connects the component to the Redux store, allowing us to access the state and dispatch actions.

Quiz Time 💡

That's it for today! In the next lesson, we'll dive deeper into React and learn about React Router, which allows us to create multi-page applications. Until then, keep coding, and happy learning! 🚀