Redux para Completos Iniciantes | Guia Completo

Introduction

This tutorial will guide you through the essential concepts and practices of Redux, a popular state management tool widely used in web development. By the end of this tutorial, you'll have the knowledge and confidence to implement Redux in your projects effectively.

Step 1: Understanding the Problem Redux Solves

• Redux addresses the issue of "Prop Drilling," where data must be passed through many layers of components to reach the component that requires it.
• This can lead to complex and hard-to-maintain code.

Step 2: Grasping the Core Concepts of Redux

• State Global: Redux provides a single source of truth for your application state, making it easier to manage.
• Reducers: Functions that take the current state and an action to return a new state.

Step 3: Using useSelector to Access State

• useSelector is a hook that allows you to extract data from the Redux store state.
• Example:

  const data = useSelector(state => state.data);
  

Step 4: Implementing Actions and Dispatches

• Actions: Plain objects that describe what happened.
• Dispatch: A function that sends actions to the Redux store.
• Example of an action:

  const action = { type: 'ADD_ITEM', payload: item };
  dispatch(action);
  

Step 5: Setting Up Redux

• Install Redux and React-Redux in your project:

  npm install redux react-redux
  

• Create a Redux store and provide it to your application using the Provider component from React-Redux.

Step 6: Creating a User Reducer

• Create a reducer to manage user data:

  const initialState = {};
  const userReducer = (state = initialState, action) => {
      switch (action.type) {
          case 'SET_USER':
              return { ...state, user: action.payload };
          default:
              return state;
      }
  };
  

Step 7: Accessing Reducer Data with useSelector

• To access user data from the user reducer:

  const user = useSelector(state => state.user);
  

Step 8: Dispatching Actions with useDispatch

• Import useDispatch and use it to dispatch actions:

  const dispatch = useDispatch();
  dispatch({ type: 'SET_USER', payload: newUser });
  

Step 9: Organizing Redux Files

• Maintain a clean folder structure:
  • reducers/ for all reducers
  • actions/ for action creators
  • store.js for store configuration

Step 10: Creating Logout Action

• Define an action to handle user logout:

  const logoutAction = () => ({ type: 'LOGOUT' });
  

Step 11: Using Redux Logger for Debugging

• Install Redux Logger for better debugging:

  npm install redux-logger
  

• Apply it as middleware when creating the Redux store.

Step 12: Creating a Cart Reducer

• Implement a reducer to manage cart state:

  const cartReducer = (state = [], action) => {
      switch (action.type) {
          case 'ADD_TO_CART':
              return [...state, action.payload];
          // other cases...
          default:
              return state;
      }
  };
  

Step 13: Adding Products to the Cart

• Dispatch actions to add products:

  dispatch({ type: 'ADD_TO_CART', payload: product });
  

Step 14: Accessing the Cart Reducer

• Use useSelector to access cart data in your components:

  const cartItems = useSelector(state => state.cart);
  

Step 15: Implementing Cart Management Functions

• Implement functions to remove items, increase/decrease quantity:

  dispatch({ type: 'REMOVE_FROM_CART', payload: productId });
  

Step 16: Creating Selectors

• Use selectors to extract specific data from the state, like total price:

  const totalPrice = useSelector(state => state.cart.reduce((acc, item) => acc + item.price, 0));
  

Step 17: Exploring Redux Toolkit

• Consider using Redux Toolkit for easier state management and code simplification.

Conclusion

By following these steps, you should now have a solid understanding of Redux, its core concepts, and how to implement it in your applications. For further learning, explore Redux Toolkit and best practices outlined in the Redux Style Guide. Happy coding!