Welcome back to CodeYourCraft! Today, we're diving into the world of React-Redux, a powerful combination that helps manage state in complex React applications. If you're new to Redux, don't worry—we'll start from the ground up!
Redux is a predictable state container for JavaScript applications. It helps you write applications that behave consistently, run in different environments (like a web browser or on the server), and are easy to test.
React itself manages the state of small components, but for larger applications, it can become difficult to manage state across multiple components. This is where Redux shines—it allows you to store the entire state of your application in a single place, making it easier to reason about and manage.
To get started with Redux in your React project, you'll first need to install Redux and React-Redux:
npm install redux react-reduxThe Redux Store is where your application's state lives. Let's create a store for our simple to-do application.
import { createStore } from 'redux';
// Root Reducer
const rootReducer = (state = {}, action) => {
switch (action.type) {
// Handling actions here
default:
return state;
}
};
// Creating Store
const store = createStore(rootReducer);
export default store;Actions are the events that trigger state changes in your application. They're plain JavaScript objects with a type property that identifies the action being taken.
// ADD_TODO action
{
type: 'ADD_TODO',
id: 0,
text: 'Learn about Redux'
}A Reducer is a pure function that takes the previous state and an action, and returns the new state.
// Reducer for ADD_TODO action
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, {
id: action.id,
text: action.text,
completed: false
}];
// Handling other actions here
default:
return state;
}
}In larger applications, you'll often have multiple reducers for different parts of your application's state. You can combine them using combineReducers from Redux.
import { createStore, combineReducers } from 'redux';
const rootReducer = combineReducers({
todos: todos
});connect 💡connect is a function provided by React-Redux that lets you connect your React components to your Redux store.
import { connect } from 'react-redux';
const TodoList = ({ todos }) => (
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
</li>
))}
</ul>
);
const mapStateToProps = state => ({
todos: state.todos
});
export default connect(mapStateToProps)(TodoList);Finally, to dispatch an action, you can use the dispatch function that comes with your connected component.
import React from 'react';
import { addTodo } from './actions';
class TodoApp extends React.Component {
addTodo = () => {
this.props.dispatch(addTodo());
};
render() {
return (
<div>
<h3>My To-do App</h3>
<button onClick={this.addTodo}>Add Todo</button>
<TodoList todos={this.props.todos} />
</div>
);
}
}
export default connect(mapStateToProps)(TodoApp);Now that you understand the basics, let's put everything together and create a simple to-do app. You can find the complete code here.
What does Redux help you achieve in a React application?
What is a Redux Store?