Learn - React Redux

This is the fifth installment of a seven-part series designed to improve your React development skills. This project focuses on integrating Redux in React application. Here, we are using FakeStore API for dummy APIs.

Getting Started with the Application

Follow these instructions to get the application running:

1. Install Node.js version 14.21.3:
   • nvm install v14.21.3
   • nvm use v14.21.3
2. Install necessary packages:
   • npm install
3. Start the application:
   • To run the project : npm start

Redux Flow

• CONSTANTS: Set up the ACTION TYPE, which defines the name of your action.
• ACTIONS: Specify the type and payload for actions based on user interactions or other events.
• REDUCERS:
  • Develop individual reducers that manage specific pieces of state.
  • Handle actions based on the ACTION TYPE provided.
  • Use combineReducers() to merge all reducers into a single reducing function, as the Redux store accepts only one reducer.
• STORE:
  • Create the Redux store with createStore().
  • Enable Redux DevTools in the browser by including window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() as an argument when creating the store.

Dependencies used

• axios: API calls are easily handled using this
• react-router-dom: To handle routing in react
• Materialize CSS
• redux
  • combineReducers(): to combine more than one reducer
  • createStore(): to create a store
• react-redux
  • : to provide a store variable to all the components inside of it
  • useSelector(): to extract varables in the store
  • useDispatch(): to dispatch an action (to update the values of the variables in the store)

React Learning Series

This project is part of a comprehensive React learning series:

1. React Application for User Listing
2. Hooks in React
3. State Management in React
4. Material-UI in React
5. Redux in React (this repository)
6. Optimizing React Apps
7. Building a Burger Builder App in React