Redux
- 762 installs
- 15.8k repo stars
- Updated July 8, 2026
- vercel-labs/json-render
The redux skill documents @json-render/redux, a StateStore adapter that connects json-render to Redux or Redux Toolkit.
About
The redux skill documents @json-render/redux, a StateStore adapter that connects json-render to Redux or Redux Toolkit. It covers installing @json-render/redux with core, react, and redux or @reduxjs/toolkit, defining a slice with replaceUiState reducer, creating reduxStateStore with store, selector, and dispatch callbacks, and wrapping the tree in StateProvider. The selector picks the json-render slice from the Redux tree while dispatch replaces the selected slice with the next model. Use when AI-generated JSON specs must sync with existing Redux state or when teams standardize on RTK slices for UI models.
- reduxStateStore adapts Redux stores to json-render StateStore.
- Supports configureStore plus createSlice replaceUiState pattern.
- Selector and dispatch callbacks isolate the json-render slice.
- Works with plain Redux or Redux Toolkit.
- StateProvider bridges json-render reads and writes through Redux.
Redux by the numbers
- 762 all-time installs (skills.sh)
- +18 installs in the week ending Jul 27, 2026 (Skillselion tracking)
- Ranked #447 of 2,277 Frontend Development skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
redux capabilities & compatibility
- Capabilities
- reduxstatestore adapts redux stores to json rend · supports configurestore plus createslice replace · selector and dispatch callbacks isolate the json · works with plain redux or redux toolkit.
- Use cases
- documentation
npx skills add https://github.com/vercel-labs/json-render --skill reduxAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 762 |
|---|---|
| repo stars | ★ 15.8k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 8, 2026 |
| Repository | vercel-labs/json-render ↗ |
How do I apply redux using the workflow in its SKILL.md?
Wire Redux or Redux Toolkit as the StateStore backend for json-render via @json-render/redux.
Who is it for?
Developers following the redux skill for the tasks it documents.
Skip if: Tasks outside the redux scope described in SKILL.md.
When should I use this skill?
User mentions redux or related triggers from the skill description.
What you get
Working redux setup aligned with the documented patterns and constraints.
- reduxStateStore integration
- shared slice for AI UI state
Files
@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/toolkitUsage
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: reduxStore,
selector: (state) => state.ui,
dispatch: (next, s) => s.dispatch(uiSlice.actions.replaceUiState(next)),
});
// 4. Use it
<StateProvider store={store}>
{/* json-render reads/writes go through Redux */}
</StateProvider>API
reduxStateStore(options)
Creates a StateStore backed by a Redux store.
| Option | Type | Required | Description |
|---|---|---|---|
store | Store | Yes | The Redux store instance |
selector | (state) => StateModel | Yes | Select the json-render slice from the Redux state tree. Use (s) => s if the entire state is the model. |
dispatch | (nextState, store) => void | Yes | Dispatch an action that replaces the selected slice with the next state |
The dispatch callback receives the full next state model and the Redux store.
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9kVercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4kHow it compares
Choose the redux skill when the app already uses Redux; otherwise prefer json-render's Zustand or standalone store adapters.
FAQ
What does redux do?
Wire Redux or Redux Toolkit as the StateStore backend for json-render via @json-render/redux.
When should I use redux?
Invoke when Wire Redux or Redux Toolkit as the StateStore backend for json-render via @json-render/redux.
Is redux safe to install?
Review the Security Audits panel on this page before installing in production.