Basic concepts of Redux & reducer for state management
19 January, 2023
3
3
0
Contributors
What is Redux
Redux is a state management library that was designed to be used with React, but it can also be used with other JavaScript libraries and frameworks. It was inspired by the Flux architecture, which Facebook developed to manage the state of their web applications.
Basic concepts of Redux
The basic concepts of Redux are:
- A single store: In a Redux app, the entire state of the app is stored in a single object tree within a single store. This makes it easier to manage the state of the app, because you only have to update a single store rather than updating state in multiple places.
- State is read-only: In a Redux app, the only way to change the state of the store is by dispatching an action. An action is a plain JavaScript object that describes a change to the store. This makes it easy to understand how the state of the app is changing, because all changes are made using actions.
- Changes are made using pure functions: In a Redux app, the only way to update the store is by writing pure functions called reducers. A reducer is a function that takes the current state of the store and an action, and returns a new state. This makes it easy to test the logic for updating the store, because reducers are pure functions that don't have any side effects.
- The store can be subscribed to: In a Redux app, you can subscribe to the store to be notified whenever the state of the store changes. This makes it easy to update your UI or perform other tasks in response to changes in the state of the app.
These are the basic concepts of Redux. It also has some other features, such as middleware and the ability to combine multiple reducers, but the concepts listed above are the core of how Redux works.
A basic example of redux with React
Next, you'll need to create a Redux store and some reducers:
import { createStore } from 'redux';
// The reducer is a pure function that takes the current state and an action,
// and returns a new state.
function counterReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// Create the store with the reducer.
const store = createStore(counterReducer);Then, you can use the react-redux library to connect your React components to the store:
import React from 'react';
import { connect } from 'react-redux';
// This is a functional component.
function Counter(props) {
return (
<div>
<h1>{props.count}</h1>
<button onClick={props.onIncrement}>+</button>
<button onClick={props.onDecrement}>-</button>
</div>
);
}
// This function maps the state from the store to the props of the component.
// It's called every time the store state changes.
function mapStateToProps(state) {
return {
count: state
};
}
// These functions map dispatch functions to the props of the component.
// They're used to send actions to the store.
function mapDispatchToProps(dispatch) {
return {
onIncrement: () => dispatch({ type: 'INCREMENT' }),
onDecrement: () => dispatch({ type: 'DECREMENT' })
};
}
// The `connect` function connects the component to the store.
// It takes two functions as arguments: `mapStateToProps` and `mapDispatchToProps`.
// These functions specify how the state from the store should be mapped to the props of the component.
export default connect(mapStateToProps, mapDispatchToProps)(Counter);Finally, you can render your root component and pass the store to the Provider
component from react-redux:
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import Counter from './Counter';
render(
<Provider store={store}>
<Counter />
</Provider>,
document.getElementById('root')
);This is a very basic example of how you might use Redux with React, but it should give you a good idea of the basic flow of data in a Redux app.