redux
This adapter bridges Redux (or Redux Toolkit) with json-render's state management layer, letting you use your Redux store as the backing state for dynamic UI generation. Configure it with your store instance, a selector for your UI slice, and a dispatch function to sync state changes back through Redux.
redux connects a Redux store as the state backend for json-render's dynamic UI rendering.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-08
redux connects a Redux store as the state backend for json-render's dynamic UI rendering. This adapter bridges Redux (or Redux Toolkit) with json-render's state management layer, letting you use your Redux store as the backing state for dynamic UI generation. Configure it with your store instance, a selector for your UI slice, and a dispatch function to sync state changes back through Redux.
Use it when
- redux's StateStore interface adapter lets you wire Redux dispatch and selectors into json-render's state management layer.
- The redux adapter supports Redux Toolkit slices directly.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
vercel-labs/json-render/redux · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to use redux with json-render?
The redux adapter connects your Redux store as the state backend for json-render UI rendering. Pass your store instance, a selector targeting your UI state slice, and a dispatch function to the adapter. json-render then reads state updates from Redux and triggers re-renders whenever your selected slice changes, keeping your dynamic UI in sync with your Redux state.
What is the redux adapter json-render StateStore interface?
redux's StateStore interface adapter lets you wire Redux dispatch and selectors into json-render's state management layer. Set up the adapter by providing your Redux store, a selector function that extracts the UI state slice you want to render, and a dispatch handler. This bridges Redux's action-based updates with json-render's reactive rendering pipeline.
How do I integrate Redux Toolkit slice with json-render?
The redux adapter supports Redux Toolkit slices directly. Define your UI state slice using createSlice, then pass your store and a selector for that slice to the redux adapter. json-render will automatically dispatch actions through your slice's reducers and re-render whenever the selected state changes, giving you full Redux Toolkit integration.
Can I connect redux to json-render for dynamic UI?
Yes. The redux adapter bridges Redux as your state backend for json-render UI generation. Configure it with your store instance and a selector for your UI state, and json-render will use Redux as its backing store. All state changes flow through Redux actions, and json-render re-renders reactively whenever your selected state updates.
What does redux adapter setup require for json-render?
redux adapter setup for json-render requires three core pieces: your Redux store instance, a selector function that extracts the UI state slice json-render should render, and a dispatch function to handle state updates. Once configured, the adapter handles syncing between Redux and json-render's rendering engine automatically.
Is redux available under an open-source license?
Yes, the redux adapter for json-render is licensed under Apache-2.0, an open-source license permitting commercial and private use with attribution and liability disclaimers.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
@json-render/redux
Redux adapter for json-render's StateStore interface. Wire a Redux store (or Redux Toolkit slice) as the state backend for json-render.
Installation
npm install @json-render/redux @json-render/core @json-render/react redux
# or with Redux Toolkit (recommended):
npm install @json-render/redux @json-render/core @json-render/react @reduxjs/toolkit
Usage
```tsx import { configureStore, createSlice } from "@reduxjs/toolkit"; import { reduxStateStore } from "@json-render/redux"; import { StateProvider } from "@json-render/react";
// 1. Define a slice for json-render state const uiSlice = createSlice({ name: "ui", initialState: { count: 0 } as Record<string, unknown>, reducers: { replaceUiState: (_state, action) => action.payload, }, });
// 2. Create the Redux store const reduxStore = configureStore({ reducer: { ui: uiSlice.reducer }, });
// 3. Create the json-render StateStore adapter const store = reduxStateStore({ store:
(truncated - see the full file via the links below)
File tree — 1 file
skills/redux/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Connect Redux store as state backend for json-render UI rendering”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Learn to architect scalable state solutions for React Native apps using Redux Toolkit for complex app state, Zustand for lightweight global stores, and TanStack Query for server-side caching. This skill covers TypeScript integration, data persistence with AsyncStorage and MMKV, and decision frameworks for choosing the right tool per use case.
Get expert guidance on choosing and implementing the right state solution for your React app. This skill covers Redux Toolkit for complex global state, Zustand for lightweight stores, TanStack Query for server data, and Context API for simple cases, plus patterns to avoid common pitfalls.
This adapter bridges Zustand and json-render by implementing the StateStore interface, letting you use a Zustand vanilla store as the backing state layer. Configure it with your store, optionally select a nested slice, and pass it to json-render's StateProvider to handle all state reads and writes through Zustand.
This adapter bridges Jotai atoms into json-render's state layer, letting you manage UI state through Jotai's atom system. Pass an atom and optional Jotai store to the jotaiStateStore function, then wrap your json-render components in StateProvider to route all state reads and writes through Jotai.
This adapter bridges XState Store atoms into json-render's StateStore interface, letting you manage application state through @xstate/store. Pass an atom to the adapter and wrap your json-render components with the resulting store provider.
Master Redux Toolkit's approach to global state management in React and Next.js projects. Learn to structure slices with createSlice, implement memoized selectors, handle async operations via RTK Query and createAsyncThunk, and apply TypeScript for type safety throughout your store.
More skills core (Apache-2.0) · nextjs-react-redux-typescript-cursor-rules (Apache-2.0)