Ohne Titel

Seite 1

Counter App Implementation in React Using Various State Management Techniques

Counter App without Using Hooks (Class Component)

Class Component Definition

class Counter extends React.Component { // ... }

Counter is a class component that extends React.Component, allowing it to use React's lifecycle methods and state management.

Constructor

constructor(props) { super(props); this.state = { count: 0, }; }

Constructor: Initializes the component's state and binds methods.

props: Properties passed to the component from its parent.

super(props): Calls the constructor of the parent class, React.Component.

this.state: Holds the component's state. Here, count is initialized to 0.

Example Breakdown

class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } }

Class Definition: Counter extends React.Component.

Constructor: Initializes state and binds event handlers.

super(props): Necessary for using this.props.

State Initialization: this.state is initialized with count set to 0.

Example Usage

import React from "react"; class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } setCount = (value) => { this.setState({ count: value }); }; render() { return ( <div> <h1>Counter</h1> <h2>{this.state.count}</h2> <button onClick={() => this.setCount(this.state.count + 1)}>+</button> <button onClick={() => this.setCount(0)}>RESET</button> <button onClick={() => this.setCount(this.state.count - 1)}>-</button> </div> ); } } export default Counter;

Initializes state in the constructor.

setCount method updates the state.

render method uses this.state.count to display the current count and provides buttons to modify the count.

Counter App with Hooks

useState

useState is a built-in React hook for managing state in functional components.

import { useState } from "react"; import "./App.css"; function App() { const [count, setCount] = useState(0); return ( <div> <h1>Counter</h1> <h2>{count}</h2> <button onClick={() => setCount(count + 1)}>+</button> <button onClick={() => setCount(0)}>RESET</button> <button onClick={() => setCount(count - 1)}>-</button> </div> ); } export default App;

useReducer

useReducer is a React hook for managing complex state logic.

import React, { useReducer } from "react"; import "./App.css"; function App() { const initialState = { count: 0 }; const reducer = (state, action) => { switch (action.type) { case "INC": return { ...state, count: state.count + action.payload }; case "RESET": return initialState; case "DEC": return { ...state, count: state.count - action.payload }; default: return state; } }; const [state, dispatch] = useReducer(reducer, initialState); return ( <div> <h1>Counter</h1> <h2>{state.count}</h2> <button onClick={() => dispatch({ type: "INC", payload: 1 })}>+</button> <button onClick={() => dispatch({ type: "RESET" })}>RESET</button> <button onClick={() => dispatch({ type: "DEC", payload: 1 })}>-</button> </div> ); } export default App;

Context API

How Context API Works

Create a Context: Use React.createContext().

Provider Component: Wrap parts of your component tree with a provider.

Consumer Components: Use the useContext hook to access context values.

Example with Context API

Create the Context and Provider

// CounterContext.js import { createContext, useState } from "react"; export const CounterContext = createContext(); export function CounterProvider({ children }) { const [count, setCount] = useState(0); return ( <CounterContext.Provider value={{ count, setCount }}> {children} </CounterContext.Provider> ); }

Use the Context in a Component

// Counter.js import React, { useContext } from "react"; import { CounterContext } from "./CounterContext"; function Counter() { const { count, setCount } = useContext(CounterContext); return ( <div> <h1>Counter</h1> <h2>{count}</h2> <button onClick={() => setCount(count + 1)}>+</button> <button onClick={() => setCount(0)}>RESET</button> <button onClick={() => setCount(count - 1)}>-</button> </div> ); } export default Counter;

Use the Provider in the Main Application

import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { CounterProvider } from "./CounterContext"; ReactDOM.render( <CounterProvider> <App /> </CounterProvider>, document.getElementById("root") );

Main Application Component

import React from "react"; import Counter from "./Counter"; function App() { return ( <div className="App"> <Counter /> </div> ); } export default App;

Redux

Redux with createStore

Store and Reducer

import { createStore } from "redux"; const initialState = { count: 0 }; const reducer = (state = initialState, action) => { switch (action.type) { case "increment": return { ...state, count: state.count + 1 }; case "decrement": return { ...state, count: state.count - 1 }; case "reset": return initialState; default: return state; } }; const store = createStore(reducer); export default store;

App Component with Redux

import { useSelector, useDispatch } from "react-redux"; function App() { const counter = useSelector((state) => state.count); const dispatch = useDispatch(); const increment = () => dispatch({ type: "increment" }); const decrement = () => dispatch({ type: "decrement" }); const reset = () => dispatch({ type: "reset" }); return ( <> <h1>Redux-Counter</h1> <div className="card"> <button onClick={increment}>+</button> <h2 onClick={reset}>{counter}</h2> <button onClick={decrement}>-</button> </div> </> ); } export default App;

Redux Toolkit (RTK)

Store and Slice

import { configureStore, createSlice } from "@reduxjs/toolkit"; const initialState = { count: 0 }; const counterSlice = createSlice({ name: "counter", initialState, reducers: { increment(state, action) { state.count += action.payload; }, decrement(state, action) { state.count -= action.payload; }, reset(state) { state.count = 0; }, }, }); const { actions, reducer } = counterSlice; const store = configureStore({ reducer: { counter: reducer, }, }); export const { increment, decrement, reset } = actions; export default store;

App Component with RTK

import React from "react"; import { useDispatch, useSelector } from "react-redux"; import { increment, decrement, reset } from "./store"; function App() { const counter = useSelector((state) => state.counter.count); const dispatch = useDispatch(); return ( <div> <h1>Counter</h1> <h2>{counter}</h2> <button onClick={() => dispatch(increment(1))}>+</button> <button onClick={() => dispatch(reset())}>Reset</button> <button onClick={() => dispatch(decrement(1))}>-</button> </div> ); } export default App;

Main Application Component with RTK

import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { Provider } from "react-redux"; import store from "./store"; ReactDOM.createRoot(document.getElementById("root")).render( <Provider store={store}> <React.StrictMode> <App /> </React.StrictMode> </Provider> );

Summary

Class Components: Use state in class-based components.

Hooks: useState and useReducer for state management in functional components.

Context API: Centralize state management and avoid prop drilling.

Redux: Global state management with createStore and hooks (useSelector, useDispatch).

Redux Toolkit (RTK): Simplified Redux setup with createSlice and configureStore.