Redux do CONCEITO a PRÁTICA! Migrando Redux Antigo para Redux Toolkit (Tutorial)

Introduction

This tutorial provides a comprehensive guide to understanding and implementing Redux, from its fundamental concepts to practical applications using the Redux Toolkit. You will learn about actions, reducers, and stores, and how to migrate from the old Redux to the more efficient Redux Toolkit in your React or React Native applications.

Step 1: Understand Redux Concepts

Begin by familiarizing yourself with the essential concepts of Redux:

• Actions: Plain JavaScript objects that describe changes in the application state.
• Reducers: Functions that determine how the state changes in response to an action.
• Store: The central repository that holds the application's state.
• Dispatch: The method used to send actions to the store to trigger state changes.
• Global State: A single source of truth for the application's state, accessible from anywhere in the app.

Practical Tip

To better grasp these concepts, visualize Redux as a flow of data. Actions trigger changes, which are handled by reducers, and the new state is stored in the store.

Step 2: Set Up Redux in Your Project

Start by initializing a Redux project using the "old" method:

1. Create a React application if you haven't done so already.
2. Install Redux and React-Redux:

   npm install redux react-redux
   

3. Create the Store:

   import { createStore } from 'redux';
   const store = createStore(reducer);
   

4. Wrap your application with the Redux Provider:

   import { Provider } from 'react-redux';
   <Provider store={store}>
     <YourApp />
   </Provider>
   

Step 3: Implement Reducers and Actions

Define your reducer and actions:

1. Create a Reducer:

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

2. Create Actions:

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

Step 4: Use mapStateToProps and mapDispatchToProps

Connect your components to the Redux store using Higher Order Components (HOC):

1. Use mapStateToProps to map the state to component props:

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

2. Use mapDispatchToProps to map dispatch actions to component props:

   const mapDispatchToProps = { increment, decrement };
   

3. Connect the component:

   import { connect } from 'react-redux';
   export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);
   

Step 5: Migrate to Redux Toolkit

Transition to Redux Toolkit for a more streamlined approach:

1. Install Redux Toolkit:

   npm install @reduxjs/toolkit
   

2. Create a Slice:

   import { createSlice } from '@reduxjs/toolkit';
   
   const counterSlice = createSlice({
       name: 'counter',
       initialState: { value: 0 },
       reducers: {
           increment: state => { state.value += 1 },
           decrement: state => { state.value -= 1 },
       },
   });
   
   export const { increment, decrement } = counterSlice.actions;
   export default counterSlice.reducer;
   

3. Configure the Store:

   import { configureStore } from '@reduxjs/toolkit';
   import counterReducer from './counterSlice';
   
   const store = configureStore({ reducer: { counter: counterReducer } });
   

4. Use Redux Hooks for accessing state and dispatching actions:

   import { useSelector, useDispatch } from 'react-redux';
   
   const value = useSelector(state => state.counter.value);
   const dispatch = useDispatch();
   
   const handleIncrement = () => dispatch(increment());
   const handleDecrement = () => dispatch(decrement());
   

Conclusion

In this tutorial, you learned the key concepts of Redux, how to implement the old Redux method, and how to transition to Redux Toolkit for a more efficient and modern approach. To further your understanding, explore Redux Toolkit's features and consider diving into more complex state management scenarios. Happy coding!