redux-cookies-middleware

import { applyMiddleware, createStore, compose } from 'redux'; import reduxCookiesMiddleware from 'redux-cookies-middleware'; import getStateFromCookies from 'redux-cookies-middleware/getStateFromCookies'; // A dummy reducer for demonstration purposes const reducer = (state = {}, action) => { switch (action.type) { case 'SET_AUTH_TOKEN': return { ...state, auth: { ...state.auth, token: action.payload } }; case 'SET_SESSION': return { ...state, session: action.payload }; default: return state; } }; // Initial state structure let initialState = { auth: { token: null, key: 'some_key' }, session: null }; // Define which parts of the state to persist in cookies and their cookie names const paths = { 'auth.token': { name: 'my_app_token' }, 'session': { name: 'my_app_session', httpOnly: false, secure: process.env.NODE_ENV === 'production' } }; // Read stored data from cookies and merge it with the initial state // This should happen before creating the store to ensure initial state is hydrated. initialState = getStateFromCookies(initialState, paths); // Create Redux store with the middleware const store = createStore( reducer, initialState, applyMiddleware(reduxCookiesMiddleware(paths)) ); // Example dispatch to demonstrate persistence store.dispatch({ type: 'SET_AUTH_TOKEN', payload: 'new-auth-token-123' }); store.dispatch({ type: 'SET_SESSION', payload: 'user-session-abc' }); console.log('Store state after dispatches:', store.getState()); // In a browser, you would now see 'my_app_token' and 'my_app_session' cookies. // For Node.js, this example would require a cookie-aware environment or mocking.