@@ -42,16 +42,14 @@ The library works by wrapping standard Redux Toolkit functions, adding persisten
4242
4343You can install ` rtk-persist ` using either ` yarn ` or ` npm ` :
4444
45- ```
45+ ``` bash
4646yarn add rtk-persist
47-
4847```
4948
5049or
5150
52- ```
51+ ``` bash
5352npm install --save rtk-persist
54-
5553```
5654
5755The package has a peer dependency on ` @reduxjs/toolkit ` and ` react-redux ` if you use the React integration.
@@ -70,7 +68,7 @@ This approach is best if you prefer the `createSlice` API from Redux Toolkit.
7068
7169Replace ` createSlice ` with ` createPersistedSlice ` . The function accepts the same options.
7270
73- ```
71+ ``` typescript
7472// features/counter/counterSlice.ts
7573import { createPersistedSlice } from ' rtk-persist' ;
7674import { PayloadAction } from ' @reduxjs/toolkit' ;
@@ -106,7 +104,7 @@ This approach is ideal if you prefer the `createReducer` builder syntax.
106104
107105Use ` createPersistedReducer ` and define your case reducers using the builder callback.
108106
109- ```
107+ ``` typescript
110108// features/counter/counterReducer.ts
111109import { createPersistedReducer } from ' rtk-persist' ;
112110import { createAction } from ' @reduxjs/toolkit' ;
@@ -134,7 +132,7 @@ export const counterReducer = createPersistedReducer(
134132
135133Whichever option you choose, you must use ` configurePersistedStore ` and provide a storage handler. The store creation is ** asynchronous** and returns a promise that resolves with the rehydrated store.
136134
137- ```
135+ ``` typescript
138136// app/store.ts
139137import { configurePersistedStore } from ' rtk-persist' ;
140138import { counterSlice } from ' ../features/counter/counterSlice' ;
@@ -178,7 +176,7 @@ This component replaces the standard `Provider` from `react-redux`. It waits for
178176
179177In your application's entry point (e.g., ` main.tsx ` or ` index.js ` ), wrap your ` App ` component with ` PersistedProvider ` .
180178
181- ```
179+ ``` typescript
182180// main.tsx
183181import React from ' react' ;
184182import ReactDOM from ' react-dom/client' ;
@@ -208,7 +206,7 @@ A custom hook that provides access to the rehydrated store instance. This is use
208206
209207#### Usage
210208
211- ```
209+ ``` typescript
212210import React from ' react' ;
213211import { usePersistedStore } from ' rtk-persist' ;
214212
@@ -237,7 +235,7 @@ The `nestedPath` is a dot-notation string representing the path from the root of
237235
238236Imagine your state is structured like ` { features: { counter: { value: 0 } } } ` . Here's how you would configure the counter slice:
239237
240- ```
238+ ``` typescript
241239// features/counter/counterSlice.ts
242240export const counterSlice = createPersistedSlice (
243241 {
@@ -285,7 +283,7 @@ Sometimes, you may need to transform a slice's state before it's saved to storag
285283
286284Here's how you can persist a slice that contains a non-serializable value like a ` Date ` object.
287285
288- ```
286+ ``` typescript
289287// features/session/sessionSlice.ts
290288import { createPersistedSlice } from ' rtk-persist' ;
291289
0 commit comments