vike-react-redux

Integrates Redux into your vike-react app.

Table of Contents

Installation
Basic usage
Example
Settings
Populate store with +data
Version history
How it works
See also

Installation

1. npm install vike-react-redux react-redux @reduxjs/toolkit
2. Extend +config.js:

   // pages/+config.js
   
   import vikeReact from "vike-react/config"
   import vikeReactRedux from "vike-react-redux/config"
   
   export default {
     // ...
     extends: [vikeReact, vikeReactRedux]
   }

[!NOTE] The vike-react-redux extension requires vike-react.

Basic usage

1. Create +redux.js file:

    // pages/+redux.js
    // Environemnt: client, server
   
    import { createStore } from '../store/createStore'
    export default { createStore }

   // store/createStore.ts
   
   export { createStore }
   export type AppStore = ReturnType<typeof createStore>
   export type RootState = ReturnType<AppStore['getState']>
   export type AppDispatch = AppStore['dispatch']
   
   import { combineReducers, configureStore } from '@reduxjs/toolkit'
   import { countReducer } from './slices/count'
   import { todosReducer } from './slices/todos'
   const reducer = combineReducers({ count: countReducer, todos: todosReducer })
   
   function createStore(pageContext) {
     const preloadedState = pageContext.isClientSide ? pageContext.redux.ssrState : undefined
     return configureStore({ reducer, preloadedState })
   }

   // store/hooks.ts
   
   // This file serves as a central hub for re-exporting pre-typed Redux hooks.
   import { useDispatch, useSelector, useStore } from 'react-redux'
   import type { AppDispatch, AppStore, RootState } from './createStore'
   
   // Use throughout your app instead of plain `useDispatch` and `useSelector`
   export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
   export const useAppSelector = useSelector.withTypes<RootState>()
   export const useAppStore = useStore.withTypes<AppStore>()

2. You can now use Redux at any of your components.

   // components/Counter.tsx
   
   export { Counter }
   
   import React from 'react'
   import { useAppDispatch, useAppSelector } from '../store/hooks'
   import { increment, selectCount } from '../store/slices/count'
   
   function Counter() {
     const dispatch = useAppDispatch()
     const count = useAppSelector(selectCount)
     return (
       <button type="button" onClick={() => dispatch(increment())}>
         Counter {count}
       </button>
     )
   }

Example

See examples/redux/.

Settings

The only +redux setting is createStore() as documented at Installation.

Install only for some pages

You can remove the vike-react-redux integration for some of your pages:

// pages/about/+redux.js

export const redux = null

Custom integration

For full customization consider ejecting.

[!NOTE] Consider making a Pull Request before ejecting.

Populate store with +data

To populate your store with data fetched via the +data hook, use +onData and pageContext.data.

// pages/todos/+onData.ts
// Environment: server, client
export { onData }

import type { PageContext } from 'vike/types'
import type { Data } from './+data'
import { initializeTodos } from '../../store/slices/todos'

function onData(pageContext: PageContext & { data?: Data }) {
  const { store } = pageContext
  store.dispatch(initializeTodos(pageContext.data!.todoItemsInitial))

  // Saving KBs: we don't need pageContext.data (we use the store instead)
  // - If we don't delete pageContext.data then Vike sends pageContext.data to the client-side
  // - This optimization only works with SSR: if the page is pre-rendered then don't do this
  delete pageContext.data
}

See To-Do List example at examples/redux/.

[!NOTE] During SSR, +onData is called only on the server — the store's initial state (set by initializeTodos()) is automatically sent to the client, so you don't need to populate the store again on the client.

This approach prevents hydration mismatches, as it ensures the client has the exact same initial state as the server during SSR.

See also: What it does.

Version history

See CHANGELOG.md.

How it works

vike-react-redux does the following:

• Initializes the store. (Using +onCreatePageContext.ssr, +onAfterRenderHtml.server, and +onBeforeRenderClient.client.)
• Installs Redux's <Provider>.
• Passes the initial state (pageContext.redux.ssrState) used during SSR to the client. (To ensure that the same state is used for hydration, preventing hydration mismatches.)

For more details, have a look at the source code of vike-react-redux (it's tiny!).

You can learn more at:

• Vike > Store (State Management) > SSR
• Redux > Server Side Rendering

See also

• Example
• Vike Docs > Redux
• Vike Docs > Store
• React Redux