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
Install
vercel-labs/json-render/redux · repository language: TypeScript
git clone https://github.com/vercel-labs/json-render
cp -r json-render/skills/redux ~/.claude/skills/reduxnpx skillfed install vercel-labs/json-render/reduxFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/redux/SKILL.md