React and Redux Explained
Key Concepts
- React Basics
- Components
- Props
- State
- Lifecycle Methods
- Hooks
- Redux Basics
- Actions
- Reducers
- Store
- Dispatch
- Connect
- Middleware
- Async Actions
React Basics
React is a JavaScript library for building user interfaces. It allows you to create reusable UI components and manage the state of your application efficiently.
Components
Components are the building blocks of a React application. They can be either functional or class-based. Functional components are simpler and use hooks for state management, while class-based components use lifecycle methods.
Example:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Props
Props (short for properties) are used to pass data from one component to another. They are read-only and help in making components reusable.
Example:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Alice" />
<Welcome name="Bob" />
</div>
);
}
State
State is a built-in object in React that stores data or information about the component. The state of a component can change over time, and whenever it changes, the component re-renders.
Example:
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
Lifecycle Methods
Lifecycle methods are special methods in a React component that get called at different stages of the component's existence. They allow you to control what happens when a component mounts, updates, or unmounts.
Example:
class Example extends React.Component {
componentDidMount() {
console.log('Component mounted');
}
componentDidUpdate() {
console.log('Component updated');
}
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return <div>Example Component</div>;
}
}
Hooks
Hooks are functions that let you use state and other React features without writing a class. They were introduced in React 16.8 and provide a more straightforward way to manage state and side effects.
Example:
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = You clicked ${count} times;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Redux Basics
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently and are easy to test. Redux stores the state of your application in a single object tree.
Actions
Actions are payloads of information that send data from your application to your Redux store. They are the only source of information for the store. Actions are plain JavaScript objects that must have a type property.
Example:
const ADD_TODO = 'ADD_TODO';
function addTodo(text) {
return {
type: ADD_TODO,
text
};
}
Reducers
Reducers specify how the application's state changes in response to actions sent to the store. Reducers are pure functions that take the previous state and an action, and return the next state.
Example:
const initialState = { todos: [] };
function todoApp(state = initialState, action) {
switch (action.type) {
case ADD_TODO:
return {
...state,
todos: [...state.todos, action.text]
};
default:
return state;
}
}
Store
The store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it. The store is created using the createStore function from Redux.
Example:
import { createStore } from 'redux';
import todoApp from './reducers';
let store = createStore(todoApp);
Dispatch
Dispatch is the method used to dispatch actions to the store. When an action is dispatched, the store runs the reducer function to update the state.
Example:
store.dispatch(addTodo('Learn Redux'));
Connect
Connect is a higher-order function provided by React Redux that connects a React component to the Redux store. It allows you to map state and dispatch to props of your component.
Example:
import { connect } from 'react-redux';
import { addTodo } from './actions';
const AddTodo = ({ dispatch }) => {
let input;
return (
<div>
<form
onSubmit={e => {
e.preventDefault();
if (!input.value.trim()) {
return;
}
dispatch(addTodo(input.value));
input.value = '';
}}
>
<input ref={node => (input = node)} />
<button type="submit">
Add Todo
</button>
</form>
</div>
);
};
export default connect()(AddTodo);
Middleware
Middleware provides a third-party extension point between dispatching an action and the moment it reaches the reducer. It is used for logging, crash reporting, asynchronous API calls, etc.
Example:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
Async Actions
Async actions are actions that involve asynchronous operations, such as API calls. Redux Thunk middleware allows you to write action creators that return a function instead of an action.
Example:
function fetchPosts() {
return dispatch => {
dispatch(requestPosts());
return fetch('/api/posts')
.then(response => response.json())
.then(json => dispatch(receivePosts(json)));
};
}
Analogies
Think of React as a blueprint for building a house. Each component is like a room in the house, and props are like the furniture and decorations that you can move from one room to another. State is like the temperature and lighting settings that change based on the time of day.
Redux is like a central control system for the house. The store is like the main control panel where all the settings are stored. Actions are like commands that you send to the control panel to change the settings, and reducers are like the rules that determine how the settings change in response to those commands.