react-redux-cache 0.16.1-rc.0 → 0.16.1

package/README.md

@@ -9,11 +9,13 @@
 
 # react-redux-cache (RRC)
 
-**Powerful**, **performant** yet **lightweight** data fetching and caching library that supports **normalization** unlike `React Query` and `RTK-Query`, while having similar but not over-engineered, simple interface. Another advantage over `RTK-Query` is that it **doesn't use Immer** ([perf issue](https://github.com/reduxjs/redux-toolkit/issues/4793)). Built on top of `Redux`, covered with tests, fully typed and written on Typescript.
+### Supports both `Redux` and `Zustand`
+
+**Powerful**, **performant** yet **lightweight** data fetching and caching library that supports **normalization** unlike `React Query` and `RTK-Query`, while having similar but not over-engineered, simple interface. Another advantage over `RTK-Query` is that it **doesn't use Immer** ([perf issue](https://github.com/reduxjs/redux-toolkit/issues/4793)). Covered with tests, fully typed and written on Typescript.
 
 **Normalization** is the best way to keep the state of the app **consistent** between different views, reduces the number of fetches and allows to show cached data when navigating, which greatly improves **user experience**.
 
-Can be considered as `ApolloClient` for protocols other than `GraphQL`, but with **full control** over its storage - redux store, with ability to write custom selectors, actions and reducers to manage cached state.
+Can be considered as `ApolloClient` for protocols other than `GraphQL`, but with **full control** over its storage - redux or zustand store, with ability to write custom selectors, actions and reducers to manage cached state.
 
 Examples of states, generated by cache reducer from `/example` project:
 <details>
@@ -130,7 +132,7 @@ Examples of states, generated by cache reducer from `/example` project:
 `react` is a peer dependency.
 
 `react-redux` and `fast-deep-equal` are optional peer dependencies:
-  - `react-redux` required when `storeHooks` is not provided when creating cache.
+  - `react-redux` required when `storeHooks` is not provided when creating cache. Not needed for Zustand.
   - `fast-deep-equal` required if `deepComparisonEnabled` cache option is enabled (default is true).
 
 ```sh
@@ -143,10 +145,15 @@ npm add react-redux-cache react fast-deep-equal
 # all required and optional peers
 npm add react-redux-cache react react-redux fast-deep-equal
 ```
+
 ### Initialization
 The only function that needs to be imported is either `withTypenames`, which is needed for normalization, or directly `createCache` if it is not needed. `createCache` creates fully typed reducer, hooks, actions, selectors and utils to be used in the app. You can create as many caches as needed, but keep in mind that normalization is not shared between them.
 All queries and mutations should be passed while initializing the cache for proper typing.
+
 #### cache.ts
+
+> Zustand requires additional option - `storeHooks`.
+
 ```typescript
 // Mapping of all typenames to their entity types, which is needed for proper normalization typing.
 // Not needed if normalization is not used.
@@ -177,6 +184,10 @@ export const {
     updateUser: { mutation: updateUser },
     removeUser: { mutation: removeUser },
   },
+
+  // Required for Zustand. Just an empty object can be passed during initialization, and hooks can be set later (see `store.ts` section).
+  // Can be also used for Redux if working with multiple stores.
+  storeHooks: {},
 })
 ```
 
@@ -194,6 +205,8 @@ type EntityChanges<T extends Typenames> = {
 ```
 
 #### store.ts
+
+Redux:
 ```typescript
 // Create store as usual, passing the new cache reducer under the name of the cache.
 // If some other redux structure is needed, provide custom cacheStateSelector when creating cache.
@@ -204,6 +217,26 @@ const store = configureStore({
   }
 })
 ```
+
+Zustand:
+```typescript
+type State = {[cache.name]: ReturnType<typeof reducer>}
+type Actions = {dispatch: (action: CacheAction) => void}
+type CacheAction = Parameters<typeof reducer>[1]
+
+export const useStore = create<State & Actions>((set, get) => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [cache.name]: reducer(undefined, {} as any),
+  dispatch: (action: CacheAction) => {
+    set({cache: reducer(get().cache, action)})
+  },
+}))
+
+const store = {dispatch: useStore.getState().dispatch, getState: useStore.getState}
+cache.storeHooks.useStore = () => store
+cache.storeHooks.useSelector = useStore
+```
+
 #### api.ts
 For normalization `normalizr` package is used in this example, but any other tool can be used if query result is of proper type.
 Perfect implementation is when the backend already returns normalized data.

package/package.json

@@ -2,8 +2,8 @@
   "name": "react-redux-cache",
   "author": "Alexander Danilov",
   "license": "MIT",
-  "version": "0.16.1-rc.0",
-  "description": "Powerful data fetching and caching library that supports normalization, built on top of redux",
+  "version": "0.16.1",
+  "description": "Powerful data fetching and caching library for Redux and Zustand that supports normalization.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -65,6 +65,7 @@
   "keywords": [
     "react",
     "redux",
+    "zustand",
     "cache",
     "query",
     "normalization"