Redux

https://redux.js.org
Admin
Redux is a JavaScript library for predictable and maintainable global state management. It helps...
Tokens:208,374
Snippets:2,265
Trust Score:8.1
Update:4 months ago
Show doc for...
Tokens:
Raw
### Clone and Run Universal Example

Source: https://redux.js.org/introduction/examples

Clone the Redux repository, navigate to the universal example directory, install dependencies, and start the application.

```bash
git clone https://github.com/reduxjs/redux.git  
  
cd redux/examples/universal  
npm install  
npm start  


```

--------------------------------

### Clone and Run Async Example

Source: https://redux.js.org/introduction/examples

Clone the Redux repository, navigate to the async example directory, install dependencies, and start the application.

```bash
git clone https://github.com/reduxjs/redux.git  
  
cd redux/examples/async  
npm install  
npm start  


```

--------------------------------

### Clone and Run Real World Example

Source: https://redux.js.org/introduction/examples

Clone the Redux repository, navigate to the real-world example directory, install dependencies, and start the application.

```bash
git clone https://github.com/reduxjs/redux.git  
  
cd redux/examples/real-world  
npm install  
npm start  


```

--------------------------------

### Clone and Run Tree View Example

Source: https://redux.js.org/introduction/examples

Clone the Redux repository, navigate to the tree-view example directory, install dependencies, and start the application.

```bash
git clone https://github.com/reduxjs/redux.git  
  
cd redux/examples/tree-view  
npm install  
npm start  


```

--------------------------------

### Clone and Run TodoMVC Example

Source: https://redux.js.org/introduction/examples

Clone and run the TodoMVC example using npm. This example serves as a comparison and covers similar points to the Todos example.

```bash
git clone https://github.com/reduxjs/redux.git  
  
cd redux/examples/todomvc  
npm install  
npm start  
```

--------------------------------

### Configure Store with Dynamic Middleware

Source: https://redux.js.org/usage/migrations/migrating-rtk-2

Set up a Redux store to allow adding middleware at runtime using createDynamicMiddleware. This example demonstrates initial setup and later addition of middleware.

```javascript
import { createDynamicMiddleware, configureStore } from '@reduxjs/toolkit'  
  
const dynamicMiddleware = createDynamicMiddleware()  
  
const store = configureStore({
  reducer: {
    todos: todosReducer
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().prepend(dynamicMiddleware.middleware)
})

// later
dynamicMiddleware.addMiddleware(someOtherMiddleware)
```

--------------------------------

### Clone and Run Counter Example

Source: https://redux.js.org/introduction/examples

Clone the Redux repository and set up the counter example using npm. This example integrates Redux with React and demonstrates manual re-rendering.

```bash
git clone https://github.com/reduxjs/redux.git  
  
cd redux/examples/counter  
npm install  
npm start  
```

--------------------------------

### Clone and Run Shopping Cart Example

Source: https://redux.js.org/introduction/examples

Clone and run the Shopping Cart example using npm. This example showcases idiomatic Redux patterns for growing applications, including normalized state and reducer composition.

```bash
git clone https://github.com/reduxjs/redux.git  
  
cd redux/examples/shopping-cart  
npm install  
npm start  
```

--------------------------------

### Clone and Run Counter Vanilla Example

Source: https://redux.js.org/introduction/examples

Clone the Redux repository and navigate to the counter-vanilla example directory to run it. This example uses the raw Redux API with ES5 and does not require a build system.

```bash
git clone https://github.com/reduxjs/redux.git  
  
cd redux/examples/counter-vanilla  
open index.html  
```

--------------------------------

### Install Reselect

Source: https://redux.js.org/tutorials/fundamentals/part-7-standard-patterns

Install the Reselect library, which provides tools for creating memoized selectors.

```bash
npm install reselect
```

--------------------------------

### Create Local Copy of Example App

Source: https://redux.js.org/tutorials/essentials/part-2-app-structure

Command to create a local copy of the Redux Toolkit app structure example using degit.

```bash
npx degit reduxjs/redux-templates/packages/rtk-app-structure-example my-app
```

--------------------------------

### Clone and Run Todos Example

Source: https://redux.js.org/introduction/examples

Clone the Redux repository and run the Todos example using npm. This example is ideal for understanding state updates with components and React Redux.

```bash
git clone https://github.com/reduxjs/redux.git  
  
cd redux/examples/todos  
npm install  
npm start  
```

--------------------------------

### Clone and Run Todos with Undo Example

Source: https://redux.js.org/introduction/examples

Clone and run the Todos with Undo example using npm. This example extends the Todos example by adding Undo/Redo functionality using Redux Undo.

```bash
git clone https://github.com/reduxjs/redux.git  
  
cd redux/examples/todos-with-undo  
npm install  
npm start  
```

--------------------------------

### Legacy Redux Basic Counter Example

Source: https://redux.js.org/introduction/getting-started

This example shows the original Redux syntax for setting up a store and reducer without Redux Toolkit. It highlights the manual creation of actions and the use of a switch statement in the reducer.

```javascript
import { createStore } from 'redux'

/**
 * This is a reducer - a function that takes a current state value and an
 * action object describing "what happened", and returns a new state value.
 * A reducer's function signature is: (state, action) => newState
 *
 * The Redux state should contain only plain JS objects, arrays, and primitives.
 * The root state value is usually an object. It's important that you should
 * not mutate the state object, but return a new object if the state changes.
 *
 * You can use any conditional logic you want in a reducer. In this example,
 * we use a switch statement, but it's not required.
 */
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counterReducer)

// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// There may be additional use cases where it's helpful to subscribe as well.

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}
```

--------------------------------

### Install Server Rendering Packages

Source: https://redux.js.org/usage/server-rendering

Install necessary packages for server-side rendering, including Express for the web server and react-redux for React bindings.

```bash
npm install express react-redux  

```

--------------------------------

### Basic Redux Toolkit Store Setup

Source: https://redux.js.org/usage/migrating-to-modern-redux

Demonstrates the simplified store setup using Redux Toolkit's `configureStore` API, which automatically handles combining reducers and adding middleware like thunk and Redux DevTools.

```javascript
import { configureStore } from '@reduxjs/toolkit'  

import postsReducer from '../reducers/postsReducer'  
import usersReducer from '../reducers/usersReducer'  

// Automatically adds the thunk middleware and the Redux DevTools extension  
const store = configureStore({
  // Automatically calls `combineReducers`  
  reducer: {
    posts: postsReducer,
    users: usersReducer
  }
})

```

--------------------------------

### Install Redux Core

Source: https://redux.js.org/introduction/getting-started

Install the Redux core library using NPM or Yarn. This is the foundational library for state management.

```bash
# NPM  
npm install redux  
  
# Yarn  
yarn add redux  

```

--------------------------------

### Redux Toolkit Basic Counter Example

Source: https://redux.js.org/introduction/getting-started

This example demonstrates how to set up a Redux store with Redux Toolkit, including creating a slice with reducers and dispatching actions. It shows the modern approach to writing Redux logic.

```javascript
import { createSlice, configureStore } from '@reduxjs/toolkit'  
  
const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

// Can still subscribe to the store
store.subscribe(() => console.log(store.getState()))

// Still pass action objects to `dispatch`, but they're created for us
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}
```

--------------------------------

### Simple connect TS Example

Source: https://redux.js.org/usage/migrating-to-modern-redux

An example demonstrating the verbose TypeScript typing required for the `connect` Higher-Order Component.

```typescript
import { connect } from 'react-redux'  
import { RootState } from '../../app/store'  
import {  
  todoToggled,  
  todoDeleted,  
  selectTodoById,  
  selectActiveTodoId  
} from './todosSlice'  

interface TodoListItemOwnProps {  
  todoId: string  
}

const mapStateToProps = (state: RootState, ownProps) => {
  return {
    todo: selectTodoById(state, ownProps.todoId),
    activeTodoId: selectActiveTodoId(state)
  }
}

const mapDispatchToProps = {
  todoDeleted,
  todoToggled
}

type TodoListItemProps = TodoListItemOwnProps &  
  ReturnType<typeof mapStateToProps> &  
  typeof mapDispatchToProps  

function TodoListItem({
  todo,
  activeTodoId,
  todoDeleted,
  todoToggled
}: TodoListItemProps) {}

export default connect(mapStateToProps, mapDispatchToProps)(TodoListItem)  

```

--------------------------------

### Basic Server Rendering Setup

Source: https://redux.js.org/usage/server-rendering

This snippet shows the basic setup for server-side rendering in a Node.js environment using Express and React. It parses a counter from the request query and uses it to initialize the Redux store before rendering the React component to a string.

```javascript
import qs from 'qs' // Add this at the top of the file  
import { renderToString } from 'react-dom/server'  
  
function handleRender(req, res) {  
  // Read the counter from the request, if provided  
  const params = qs.parse(req.query)  
  const counter = parseInt(params.counter, 10) || 0  
  
  // Compile an initial state  
  let preloadedState = { counter }  
  
  // Create a new Redux store instance  
  const store = createStore(counterApp, preloadedState)  
  
  // Render the component to a string  
  const html = renderToString(  
    <Provider store={store}>  
      <App />  
    </Provider>  
  )  
  
  // Grab the initial state from our Redux store  
  const finalState = store.getState()  
  
  // Send the rendered page back to the client  
  res.send(renderFullPage(html, finalState))  
}  

```

--------------------------------

### Basic Redux and UI Integration Example

Source: https://redux.js.org/tutorials/fundamentals/part-5-ui-react

Illustrates the fundamental steps of integrating Redux with a UI: creating a store, subscribing to updates, rendering the UI with state, and dispatching actions. This example uses vanilla JavaScript and a simple HTML structure.

```javascript
const store = Redux.createStore(counterReducer)

store.subscribe(render)

const valueEl = document.getElementById('value')

function render() {
  const state = store.getState()
  const newValue = state.value.toString()
  
  valueEl.innerHTML = newValue
}

render()

document.getElementById('increment').addEventListener('click', function () {
  store.dispatch({ type: 'counter/incremented' })
})
```

--------------------------------

### Normalized State Structure Example

Source: https://redux.js.org/usage/structuring-reducers/normalizing-state-shape

An example of a normalized state structure for a blog application, demonstrating how to organize posts, comments, and users.

```json
{
    "posts": {
        "byId": {
            "post1": {
                "id": "post1",
                "author": "user1",
                "body": "......",
                "comments": ["comment1", "comment2"]
            },
            "post2": {
                "id": "post2",
                "author": "user2",
                "body": "......",
                "comments": ["comment3", "comment4", "comment5"]
            }
        },
        "allIds": ["post1", "post2"]
    },
    "comments": {
        "byId": {
            "comment1": {
                "id": "comment1",
                "author": "user2",
                "comment": "....."
            },
            "comment2": {
                "id": "comment2",
                "author": "user3",
                "comment": "....."
            },
            "comment3": {
                "id": "comment3",
                "author": "user3",
                "comment": "....."
            },
            "comment4": {
                "id": "comment4",
                "author": "user1",
                "comment": "....."
            },
            "comment5": {
                "id": "comment5",
                "author": "user3",
                "comment": "....."
            }
        },
        "allIds": ["comment1", "comment2", "comment3", "comment4", "comment5"]
    },
    "users": {
        "byId": {
            "user1": {
                "username": "user1",
                "name": "User 1"
            },
            "user2": {
                "username": "user2",
                "name": "User 2"
            },
            "user3": {
                "username": "user3",
                "name": "User 3"
            }
        },
        "allIds": ["user1", "user2", "user3"]
    }
}
```

--------------------------------

### Install Redux Packages

Source: https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers

Commands to install the necessary Redux packages for a new project. This includes Redux Toolkit and React-Redux.

```bash
npm install @reduxjs/toolkit react-redux
```

--------------------------------

### Basic Selector Function Examples

Source: https://redux.js.org/usage/deriving-data-selectors

Demonstrates various ways to write basic selector functions that accept the Redux state and return derived data. These examples show direct lookups, mapping over arrays, and encapsulating deep state access.

```javascript
// Arrow function, direct lookup
const selectEntities = state => state.entities
  
// Function declaration, mapping over an array to derive values
function selectItemIds(state) {
  return state.items.map(item => item.id)
}

// Function declaration, encapsulating a deep lookup
function selectSomeSpecificField(state) {
  return state.some.deeply.nested.field
}

// Arrow function, deriving values from an array
const selectItemsWhoseNamesStartWith = (items, namePrefix) =>
  items.filter(item => item.name.startsWith(namePrefix))
```

--------------------------------

### Install Redux Toolkit and React-Redux

Source: https://redux.js.org/tutorials/quick-start

Add the necessary Redux Toolkit and React-Redux packages to your project using npm.

```bash
npm install @reduxjs/toolkit react-redux  

```

--------------------------------

### Install Redux Toolkit with NPM or Yarn

Source: https://redux.js.org/introduction/installation

Use this command to install the Redux Toolkit package, which includes Redux core and essential utilities for building Redux applications.

```bash
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit
```

--------------------------------

### Redux Store Setup with Listener Middleware

Source: https://redux.js.org/usage/migrating-to-modern-redux

Configures the Redux store using `configureStore` and prepends the `listenerMiddleware` to the default middleware.

```javascript
import { configureStore } from '@reduxjs/toolkit'  
  
import { listenerMiddleware } from './listenerMiddleware'  
  
// omit reducers  
  
export const store = configureStore({  
  reducer: rootReducer,  
  // Add the listener middleware _before_ the thunk or dev checks  
  middleware: getDefaultMiddleware =>  
    getDefaultMiddleware().prepend(listenerMiddleware.middleware)  
})  

```

--------------------------------

### Basic App Component

Source: https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers

A simple React component that displays a welcome message. This is part of the starter project setup for the tutorial.

```javascript
        <h2>Welcome to the Redux Fundamentals example app!</h2>
```

--------------------------------

### Legacy Redux Store Setup

Source: https://redux.js.org/usage/migrating-to-modern-redux

Illustrates the traditional multi-step process for setting up a Redux store using `createStore`, including combining reducers, applying middleware, and composing enhancers.

```javascript
import { createStore, applyMiddleware, combineReducers, compose } from 'redux'  
import { thunk } from 'redux-thunk'  

import postsReducer from '../reducers/postsReducer'  
import usersReducer from '../reducers/usersReducer'  

const rootReducer = combineReducers({
  posts: postsReducer,
  users: usersReducer
})

const middlewareEnhancer = applyMiddleware(thunk)

const composeWithDevTools =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const composedEnhancers = composeWithDevTools(middlewareEnhancer)

const store = createStore(rootReducer, composedEnhancers)

```

--------------------------------

### Redux Toolkit Counter Slice Example

Source: https://redux.js.org/tutorials/quick-start

An example of a Redux Toolkit slice reducer for a counter, including action creators. This code is part of a larger Redux Toolkit setup.

```javascript
// The function below is called a thunk and allows us to perform async logic. It

```

--------------------------------

### Import Redux Core Library

Source: https://redux.js.org/tutorials/fundamentals/part-1-overview

This snippet shows how to import the Redux core library using a script tag, which is suitable for basic HTML examples. In practice, Redux is typically installed via NPM.

```html
<script type="module" src="https://unpkg.com/redux@latest/dist/redux.browser.mjs"></script>
```

--------------------------------

### Redux-Saga Fetch User Example

Source: https://redux.js.org/usage/side-effects-approaches

Demonstrates a typical Redux-Saga setup for fetching user data. It includes a worker saga to perform the API call and dispatch actions, and a watcher saga to listen for specific action types.

```javascript
import { call, put, takeEvery } from 'redux-saga/effects'  
  
// "Worker" saga: will be fired on USER_FETCH_REQUESTED actions  
function* fetchUser(action) {  
  yield put(fetchUserStarted())  
  try {  
    const user = yield call(userApi.getUserById, action.payload.userId)  
    yield put(fetchUserSucceeded(user))  
  } catch (err) {  
    yield put(fetchUserFailed(err.message))  
  }  
}  
  
// "Watcher" saga: starts fetchUser on each `USER_FETCH_REQUESTED` action  
function* fetchUserWatcher() {  
  yield takeEvery('USER_FETCH_REQUESTED', fetchUser)  
}  
  
// Can use also use sagas for complex async workflows with "child tasks":  
function* fetchAll() {  
  const task1 = yield fork(fetchResource, 'users')  
  const task2 = yield fork(fetchResource, 'comments')  
  yield delay(1000)  
}  
  
function* fetchResource(resource) {  
  const { data } = yield call(api.fetch, resource)  
  yield put(receiveData(data))  
}
```

--------------------------------

### Handling Promises with Redux-Pack

Source: https://redux.js.org/introduction/ecosystem

A declarative approach to promise handling in Redux. It guides users towards good practices without exposing excessive complexity. Reducers can use the `handle` function to manage start, finish, success, and failure states.

```javascript
dispatch({type : "FETCH_DATA", payload : myAjaxLib.get("/data") });

// in a reducer:
        case "FETCH_DATA": = 
            return handle(state, action, {
                start: prevState => ({
                  ...prevState,
                  isLoading: true,
                  fooError: null
                }),
                finish: prevState => ({ ...prevState, isLoading: false }),
                failure: prevState => ({ ...prevState, fooError: payload }),
                success: prevState => ({ ...prevState, foo: payload }),
            });

```

--------------------------------

### Configuring Store with Custom Middleware and Enhancers

Source: https://redux.js.org/usage/configuring-your-store

This example demonstrates configuring the store with custom middleware (`loggerMiddleware`) and an enhancer (`monitorReducersEnhancer`), along with preloaded state and hot reloading support.

```javascript
import { configureStore } from '@reduxjs/toolkit'  
  
import monitorReducersEnhancer from './enhancers/monitorReducers'  
import loggerMiddleware from './middleware/logger'  
import rootReducer from './reducers'  
  
export default function configureAppStore(preloadedState) {  
  const store = configureStore({
    reducer: rootReducer,
    middleware: getDefaultMiddleware =>  
      getDefaultMiddleware().prepend(loggerMiddleware),
    preloadedState,
    enhancers: [monitorReducersEnhancer]
  })
  
  if (process.env.NODE_ENV !== 'production' && module.hot) {
    module.hot.accept('./reducers', () => store.replaceReducer(rootReducer))
  }
  
  return store  
}  

```

--------------------------------

### Example Feature Folder Structure

Source: https://redux.js.org/faq/code-structure

Illustrates a recommended project layout using feature folders, with a 'todos' feature containing its slice logic and React component.

```text
/src
  index.tsx: Entry point file that renders the React component tree
  /app
    store.ts: store setup
    rootReducer.ts: root reducer (optional)
    App.tsx: root React component
  /common: hooks, generic components, utils, etc
  /features: contains all "feature folders"
    /todos: a single feature folder
      todosSlice.ts: Redux reducer logic and associated actions
      Todos.tsx: a React component
```

--------------------------------

### Creating a Redux Store

Source: https://redux.js.org/api/createstore

This example demonstrates how to create a Redux store with a simple reducer and initial state. It then dispatches an action and logs the updated state.

```javascript
import { createStore } from 'redux'  
  
function todos(state = [], action) {  
  switch (action.type) {  
    case 'ADD_TODO':  
      return state.concat([action.text])  
    default:  
      return state  
  }  
}  
  
const store = createStore(todos, ['Use Redux'])  
  
store.dispatch({  
  type: 'ADD_TODO',  
  text: 'Read the docs'  
})  
  
console.log(store.getState())  
// [ 'Use Redux', 'Read the docs' ]  
```

--------------------------------

### Installing Redux DevTools Extension

Source: https://redux.js.org/usage/configuring-your-store

Install the `redux-devtools-extension` package as a development dependency using npm.

```bash
npm install --save-dev redux-devtools-extension  

```

--------------------------------

### Install Redux Undo Package

Source: https://redux.js.org/usage/implementing-undo-history

Command to install the redux-undo library, which provides a pre-built undoable reducer enhancer.

```bash
npm install redux-undo
```

--------------------------------

### Example Redux State Structure

Source: https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers

An example of a typical Redux state object, containing nested data for todos and filters.

```javascript
const todoAppState = {
  todos: [
    { id: 0, text: 'Learn React', completed: true },
    { id: 1, text: 'Learn Redux', completed: false, color: 'purple' },
    { id: 2, text: 'Build something fun!', completed: false, color: 'blue' }
  ],
  filters: {
    status: 'Active',
    colors: ['red', 'blue']
  }
}
```

--------------------------------

### Initialize Entity Adapter and State

Source: https://redux.js.org/tutorials/fundamentals/part-8-modern-redux

Set up the `createEntityAdapter` and `getInitialState` to manage normalized state with additional fields like 'status'.

```javascript
import {
  createSlice,
  createAsyncThunk,
  createEntityAdapter
} from '@reduxjs/toolkit'
// omit some imports

const todosAdapter = createEntityAdapter()

const initialState = todosAdapter.getInitialState({
  status: 'idle'
})
```

--------------------------------

### Install Redux Thunk

Source: https://redux.js.org/tutorials/fundamentals/part-6-async-logic

Install the redux-thunk package using npm. This package provides the middleware for handling asynchronous actions.

```bash
npm install redux-thunk  

```

--------------------------------

### Configure Store with Root Reducer (JavaScript)

Source: https://redux.js.org/usage/writing-tests

Sets up the Redux store using `configureStore` and `combineReducers`. This example demonstrates how to create a root reducer for the store.

```javascript
import { combineReducers, configureStore } from '@reduxjs/toolkit'  
import userReducer from '../features/users/userSlice'  
// Create the root reducer independently to obtain the RootState and PreloadedState type  
const rootReducer = combineReducers({  
  user: userReducer  
})  
export function setupStore(preloadedState) {  
  return configureStore({  
    reducer: rootReducer,  
    preloadedState  
  })  
}  


```

--------------------------------

### Setting up Redux Store with Thunk Middleware

Source: https://redux.js.org/api/applymiddleware

Demonstrates how to create a Redux store and apply the Redux Thunk middleware. This setup is necessary to enable dispatching functions (thunks) as actions.

```javascript
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { thunk } from 'redux-thunk'
import * as reducers from './reducers'

const reducer = combineReducers(reducers)
// applyMiddleware supercharges createStore with middleware: 
const store = createStore(reducer, applyMiddleware(thunk))
```

--------------------------------

### Install Redux Toolkit with NPM

Source: https://redux.js.org/redux-toolkit/overview

Install Redux Toolkit using NPM. This is the standard package manager for Node.js projects.

```bash
# NPM  
npm install @reduxjs/toolkit  
```

--------------------------------

### Basic Store Setup in index.js

Source: https://redux.js.org/usage/configuring-your-store

This snippet shows the basic structure of `index.js` for setting up a Redux store using `configureStore` and providing it to the React application.

```javascript
import React from 'react'  
import { render } from 'react-dom'  
import { Provider } from 'react-redux'  
import App from './components/App'  
import configureStore from './configureStore'  
  
const store = configureStore()  
  
render(  
  <Provider store={store}>  
    <App />  
  </Provider>,  
  document.getElementById('root')  
)  

```

--------------------------------

### Install Redux Toolkit with Yarn

Source: https://redux.js.org/redux-toolkit/overview

Install Redux Toolkit using Yarn. Yarn is an alternative package manager for Node.js projects.

```bash
# Yarn  
yarn add @reduxjs/toolkit  
```

--------------------------------

### Install React-Redux Bindings

Source: https://redux.js.org/introduction/installation

Install the react-redux package to integrate Redux with your React applications. This is typically needed alongside Redux Toolkit.

```bash
npm install react-redux
```

--------------------------------

### Configuring Redux Store and Dispatching Actions

Source: https://redux.js.org/api/combinereducers

Sets up the Redux store using `configureStore` with the combined reducer. Demonstrates dispatching an action and logging the state changes.

```javascript
import { configureStore } from '@reduxjs/toolkit'
import reducer from './reducers/index'

const store = configureStore({
  reducer
})
console.log(store.getState())
// {
//   counter: 0,
//   todos: []
// }

store.dispatch({
  type: 'ADD_TODO',
  text: 'Use Redux'
})
console.log(store.getState())
// {
//   counter: 0,
//   todos: [ 'Use Redux' ]
// }
```

--------------------------------

### Basic Express Server Setup for SSR

Source: https://redux.js.org/usage/server-rendering

Set up a basic Express server to handle incoming requests for server-side rendering. This includes serving static files and defining a middleware for request handling.

```javascript
import path from 'path'
import Express from 'express'
import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import counterApp from './reducers'
import App from './containers/App'

const app = Express()
const port = 3000

// Serve static files
app.use('/static', Express.static('static'))

// This is fired every time the server side receives a request
app.use(handleRender)

// We are going to fill these out in the sections to follow
function handleRender(req, res) {
  /* ... */
}
function renderFullPage(html, preloadedState) {
  /* ... */
}

app.listen(port)

```

--------------------------------

### Install Redux Core Library

Source: https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers

Install the Redux core library using npm to access utilities like `combineReducers`. This is a prerequisite for using the `combineReducers` function.

```bash
npm install redux  
```

--------------------------------

### Install Redux Core Package

Source: https://redux.js.org/introduction/installation

Install only the Redux core package if you do not need the additional utilities provided by Redux Toolkit. This can be done using NPM or Yarn.

```bash
npm install redux

# Yarn
yarn add redux
```

--------------------------------

### Create a Basic Redux Store

Source: https://redux.js.org/usage/configuring-your-store

This snippet shows the initial setup for creating a Redux store using `createStore` and integrating it with React Redux's `Provider`.

```javascript
import React from 'react'  
import { render } from 'react-dom'  
import { Provider } from 'react-redux'  
import { createStore } from 'redux'  
import rootReducer from './reducers'  
import App from './components/App'  
  
const store = createStore(rootReducer)  
  
render(  
  <Provider store={store}>  
    <App />  
  </Provider>,  
  document.getElementById('root')  
)  

```

--------------------------------

### Configure Store with Root Reducer (TypeScript)

Source: https://redux.js.org/usage/writing-tests

Sets up the Redux store using `configureStore` and `combineReducers`. This example demonstrates how to create a root reducer and define types for the store's state and dispatch.

```typescript
import { combineReducers, configureStore } from '@reduxjs/toolkit'  
import userReducer from '../features/users/userSlice'  
// Create the root reducer independently to obtain the RootState and PreloadedState type  
const rootReducer = combineReducers({  
  user: userReducer  
})  
export function setupStore(preloadedState?: PreloadedState) {  
  return configureStore({  
    reducer: rootReducer,  
    preloadedState  
  })  
}  
export type PreloadedState = Parameters<typeof rootReducer>[0]  
export type RootState = ReturnType<typeof rootReducer>  
export type AppStore = ReturnType<typeof setupStore>  
export type AppDispatch = AppStore['dispatch']  


```

--------------------------------

### Typical App State Shape Example

Source: https://redux.js.org/usage/structuring-reducers/basic-reducer-structure

An example illustrating a typical Redux state shape that categorizes data into domain data, app state, and UI state.

```javascript
{
    domainData1 : {},
    domainData2 : {},
    appState1 : {},
    appState2 : {},
    ui : {
        uiState1 : {},
        uiState2 : {},
    }
}

```

--------------------------------

### Creating and Dispatching Actions with createStore

Source: https://redux.js.org/api/store

This snippet demonstrates how to create a Redux store using the legacy `createStore` method and dispatch actions to update the state. Ensure you have 'redux' installed.

```javascript
import { createStore } from 'redux'  
const store = createStore(todos, ['Use Redux'])  
  
function addTodo(text) {  
  return {  
    type: 'ADD_TODO',  
    text  
  }  
}  
  
store.dispatch(addTodo('Read the docs'))  
store.dispatch(addTodo('Read about the middleware'))  

```

--------------------------------

### Redux-Observable AJAX Example

Source: https://redux.js.org/usage/side-effects-approaches

An example of a Redux-Observable epic for handling AJAX requests. It uses RxJS operators like `filter`, `mergeMap`, and `pipe` to process actions and API responses.

```javascript
// Typical AJAX example:  
const fetchUserEpic = action$ =>  
  action$.pipe(  
    filter(fetchUser.match),  
    mergeMap(action =>  
      ajax  
        .getJSON(`https://api.github.com/users/${action.payload}`)  
        .pipe(map(response => fetchUserFulfilled(response)))  
    )  
  )  
```

--------------------------------

### Dispatching Action and Logging State with Multiple Enhancers

Source: https://redux.js.org/tutorials/fundamentals/part-4-store

Dispatches an action and logs the store's state after setup with both `sayHiOnDispatch` and `includeMeaningOfLife` enhancers. The output shows the effect of both enhancers.

```javascript
import store from './store'  
  
store.dispatch({ type: 'todos/todoAdded', payload: 'Learn about actions' })  
// log: 'Hi!'  
  
console.log('State after dispatch: ', store.getState())  
// log: {todos: [...], filters: {status, colors}, meaningOfLife: 42}  

```

--------------------------------

### Folder Structure Example

Source: https://redux.js.org/usage/nextjs

Illustrates a typical folder structure for Redux logic within a Next.js application, placing Redux files alongside the `/app` directory.

```tree
/app
  layout.tsx
  page.tsx
  StoreProvider.tsx
/lib
  store.ts
  /features
    /todos
      todosSlice.ts

```

--------------------------------

### Memoized Selector Example

Source: https://redux.js.org/tutorials/essentials/part-6-performance-normalization

This is an example of a selector that filters notifications. While it uses .filter(), it returns a number, making it safer than returning a new array reference. Memoization might still offer minor performance gains by avoiding repeated filtering.

```typescript
export const selectUnreadNotificationsCount = (state: RootState) => {
  const allNotifications = selectAllNotifications(state)
  const unreadNotifications = allNotifications.filter(
    notification => !notification.read
  )
  return unreadNotifications.length
}
```

--------------------------------

### Create Redux Store with Middleware

Source: https://redux.js.org/introduction/examples

This snippet demonstrates creating a Redux store and applying middleware, commonly used in the async example.

```javascript
const store = createStore(reducer, applyMiddleware(...middleware))

```

--------------------------------

### Redux Toolkit: createEntityAdapter Example

Source: https://redux.js.org/tutorials/fundamentals/part-8-modern-redux

Demonstrates the use of createEntityAdapter for managing normalized state. It provides pre-built reducers and memoized selectors for common CRUD operations.

```javascript
import { createSlice, createEntityAdapter } from '@reduxjs/toolkit'

const adapter = createEntityAdapter({
  // Assume IDs are strings or numbers
  selectId: (user) => user.id,
  // Sort users by name
  sortComparer: (a, b) => a.name.localeCompare(b.name)
})

const initialState = adapter.getInitialState({
  loading: 'idle'
})

const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {
    userAdded: adapter.addOne,
    userUpdated: adapter.updateOne,
    userRemoved: adapter.removeOne
  }
})

// Export selectors
export const { selectAll: selectAllUsers, selectById: selectUserById } = adapter.getSelectors(
  (state) => state.users
)

export const { userAdded, userUpdated, userRemoved } = usersSlice.actions

export default usersSlice.reducer
```
Tokens:
Raw