Advanced Redux Patterns

1. Introduction

Redux is a predictable state container for JavaScript apps. It is often used with React to manage the state of applications. Advanced Redux patterns help in organizing and maintaining complex state management logic.

2. Middleware

Middleware provides a way to enhance Redux with custom functionality. Common use cases include logging, crash reporting, and handling asynchronous actions.

const logger = store => next => action => {
                console.log('dispatching', action);
                return next(action);
            };

3. Selectors

Selectors are pure functions that take the state and return some data. They can be used to encapsulate complex logic and memoize results for performance optimization.

import { createSelector } from 'reselect';

            const selectItems = state => state.items;
            const selectVisibleItems = createSelector(
              [selectItems],
              items => items.filter(item => item.visible)
            );

4. Ducks Pattern

The Ducks pattern is a way to bundle Redux logic in a single file, combining actions, reducers, and selectors. This helps in organizing code better.

// ducks/todos.js
            const ADD_TODO = 'ADD_TODO';

            export const addTodo = (todo) => ({
                type: ADD_TODO,
                payload: todo
            });

            const initialState = [];

            const todosReducer = (state = initialState, action) => {
                switch (action.type) {
                    case ADD_TODO:
                        return [...state, action.payload];
                    default:
                        return state;
                }
            };

            export default todosReducer;

5. Normalization

Normalizing state shape is essential for avoiding deeply nested structures that complicate updates and retrieval. Using libraries like normalizr can help in managing denormalized data.

import { normalize, schema } from 'normalizr';

            const user = new schema.Entity('users');
            const post = new schema.Entity('posts', { author: user });

            const data = {
                id: 1,
                author: { id: 1, name: 'Paul' },
                title: 'My Post',
                comments: []
            };

            const normalizedData = normalize(data, post);

6. FAQ