Lecture 58 :- React Intermediate - Class 4

In "React Intermediate - Class 4," we'll continue exploring more intermediate React concepts and build on what we learned in the previous classes. We'll cover topics such as managing state with Redux and handling asynchronous actions.

Step 1: Introduction to Redux

Redux is a predictable state container for JavaScript apps. It helps manage the state of your application in a centralized store, making it easier to manage and modify application state.

Install Redux:

To get started with Redux, you need to install the required packages:

bashCopy code

npm install redux react-redux

Step 2: Creating a Redux Store

Let's create a simple Redux store for managing the theme state from the previous classes.

Create a new file called themeReducer.js inside the src folder with the following content:

jsxCopy code

const themeReducer = (state = 'light', action) => {  switch (action.type) {    case 'TOGGLE_THEME':      return state === 'light' ? 'dark' : 'light';    default:      return state;  } }; export default themeReducer;

Step 3: Combining Reducers

In larger applications, you might have multiple reducers to manage different parts of the state. You can use the combineReducers function from Redux to combine these reducers into a single root reducer.

jsxCopy code

import { combineReducers } from 'redux'; import themeReducer from './themeReducer'; const rootReducer = combineReducers({  theme: themeReducer, }); export default rootReducer;

Step 4: Creating the Redux Store

Now, create the Redux store and provide it to the entire application using the Provider component from react-redux.

Create a new file called store.js inside the src folder with the following content:

jsxCopy code

import { createStore } from 'redux'; import rootReducer from './reducers/rootReducer'; const store = createStore(rootReducer); export default store;

Step 5: Dispatching Actions

To update the state in the Redux store, we need to dispatch actions. Actions are plain JavaScript objects that describe what happened in the application.

Create a new file called themeActions.js inside the src folder with the following content:

jsxCopy code

export const toggleTheme = () => {  return {    type: 'TOGGLE_THEME',  }; };

Step 6: Using Redux in Components

Now, let's use Redux in the App.js and Button.js components.

In Button.js, use Redux's useDispatch Hook to dispatch the toggleTheme action:

jsxCopy code

import React from 'react'; import { useDispatch } from 'react-redux'; import { toggleTheme } from './actions/themeActions'; function Button({ text }) {  const dispatch = useDispatch();  const handleClick = () => {    dispatch(toggleTheme());  };  return (    <button onClick={handleClick} style={{ padding: '10px 20px', fontSize: '16px' }}>      {text}    </button>  ); } export default Button;

In App.js, wrap the entire application with the Provider component and pass the Redux store as a prop:

jsxCopy code

import React from 'react'; import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; import { Provider } from 'react-redux'; import Home from './Home'; import About from './About'; import Form from './Form'; import ParentComponent from './ParentComponent'; import UserList from './UserList'; import Button from './Button'; import { ThemeProvider, ThemeContext } from './ThemeContext'; import Counter from './Counter'; import useCounter from './useCounter'; import store from './store'; function App() {  const { theme, setTheme } = React.useContext(ThemeContext);  const { count, increment, decrement } = useCounter(0);  const toggleTheme = () => {    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));  };  return (    <Router>      <Provider store={store}>        <ThemeProvider>          <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#333' }}>            <h1>Hello, React!</h1>            <nav>              <ul>                <li>                  <Link to="/">Home</Link>                </li>                <li>                  <Link to="/about">About</Link>                </li>                <li>                  <Link to="/products">Products</Link>                </li>              </ul>            </nav>            <Switch>              <Route exact path="/" component={Home} />              <Route path="/about" component={About} />              <Route path="/products" component={Products} />              <Route path="/form" component={Form} />              <Route path="/user-list" component={UserList} />              <Route path="/parent-component" component={ParentComponent} />              <Route path="/button">                <Button text="Toggle Theme" />              </Route>              <Route path="/counter">                <Counter count={count} increment={increment} decrement={decrement} />              </Route>            </Switch>            <Button onClick={toggleTheme} text="Toggle Theme" />          </div>        </ThemeProvider>      </Provider>    </Router>  ); } export default App;

Congratulations! You've completed the fourth class of React Intermediate. You've learned about managing state with Redux, dispatching actions, and using Redux in components.

React and Redux together provide a powerful and flexible way to build scalable and maintainable applications. As you continue your React journey, you can explore more advanced topics such as middleware in Redux, Redux thunk for handling asynchronous actions, and integrating Redux with React Router.

Keep practicing, building more complex applications, and exploring the vast possibilities of React and Redux! Happy coding!