State Management | Advanced | Javascript Essentials Tutorial

State management in JavaScript applications

State management is a crucial aspect of modern JavaScript applications, especially in single-page applications (SPAs). This tutorial covers various state management techniques and libraries to help you manage state effectively in your JavaScript applications.

Key Points:

State management involves tracking and updating the state of an application.
Proper state management helps maintain consistency and predictability in your application.
There are different approaches to state management, including local state, context API, and external libraries.

Local State

Local state refers to state that is managed within a single component. It is suitable for small applications or individual components that do not need to share state with others.


// React example of local state
import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

export default Counter;

Context API

The Context API is a built-in feature of React that allows you to share state across multiple components without prop drilling. It is suitable for medium-sized applications.


// React example using Context API
import React, { createContext, useState, useContext } from 'react';

// Create a context
const CountContext = createContext();

function CountProvider({ children }) {
    const [count, setCount] = useState(0);

    return (
        <CountContext.Provider value={{ count, setCount }}>
            {children}
        </CountContext.Provider>
    );
}

function Counter() {
    const { count, setCount } = useContext(CountContext);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

function App() {
    return (
        <CountProvider>
            <Counter />
        </CountProvider>
    );
}

export default App;

Redux

Redux is a popular state management library for JavaScript applications. It provides a centralized store for state and a predictable state container, making it suitable for large applications.


// Install Redux and React-Redux
npm install redux react-redux

// Create a Redux store
import { createStore } from 'redux';

// Define initial state
const initialState = { count: 0 };

// Define a reducer
function counterReducer(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        default:
            return state;
    }
}

// Create the Redux store
const store = createStore(counterReducer);

// Define actions
const increment = () => ({ type: 'INCREMENT' });

// Create a Counter component
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
    const count = useSelector(state => state.count);
    const dispatch = useDispatch();

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => dispatch(increment())}>Increment</button>
        </div>
    );
}

export default Counter;

// Set up the Redux Provider
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

MobX

MobX is another state management library that emphasizes simplicity and scalability. It uses observables to track state changes and automatically re-renders components when the state changes.


// Install MobX and MobX React
npm install mobx mobx-react

// Create a MobX store
import { makeAutoObservable } from 'mobx';

class CounterStore {
    count = 0;

    constructor() {
        makeAutoObservable(this);
    }

    increment() {
        this.count += 1;
    }
}

const counterStore = new CounterStore();
export default counterStore;

// Create a Counter component
import React from 'react';
import { observer } from 'mobx-react';
import counterStore from './counterStore';

const Counter = observer(() => (
    <div>
        <p>Count: {counterStore.count}</p>
        <button onClick={() => counterStore.increment()}>Increment</button>
    </div>
));

export default Counter;

Recoil

Recoil is a state management library for React that provides a simple and flexible way to manage state with atoms and selectors. It allows for fine-grained control over state updates.


// Install Recoil
npm install recoil

// Set up Recoil root
import React from 'react';
import { RecoilRoot } from 'recoil';
import Counter from './Counter';

function App() {
    return (
        <RecoilRoot>
            <Counter />
        </RecoilRoot>
    );
}

export default App;

// Define atoms and selectors
import { atom, useRecoilState } from 'recoil';

const countState = atom({
    key: 'countState',
    default: 0,
});

// Create a Counter component
import React from 'react';
import { useRecoilState } from 'recoil';
import { countState } from './state';

function Counter() {
    const [count, setCount] = useRecoilState(countState);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

export default Counter;

Summary

In this tutorial, you learned about various state management techniques and libraries in JavaScript applications, including local state, Context API, Redux, MobX, and Recoil. Proper state management helps maintain consistency, predictability, and scalability in your applications. Choose the approach that best fits the size and complexity of your project.

JavaScript Essentials - State Management