Redux

by vercel-labsfc2a696a50a3No license18K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated yesterday

Redux adapter for json-render's StateStore interface. Use when integrating json-render with Redux or Redux Toolkit for state management via @json-render/redux.

FeaturedInstructions onlySoftware Development

AI-generated overview

Wires a Redux or Redux Toolkit store into json-render's StateStore interface via the @json-render/redux adapter.

What it does: This skill documents how to connect a Redux store (or Redux Toolkit slice) to json-render as its state backend. It covers installing the @json-render/redux, @json-render/core, @json-render/react and Redux packages, defining a slice for json-render state, creating the store, and building the adapter with reduxStateStore. It also documents the adapter's options: store, selector and dispatch.
When to use it: Use it when integrating json-render with Redux or Redux Toolkit for state management. It fits projects that already use Redux and want json-render reads and writes to flow through it.
Requirements: Node.js with npm to install @json-render/redux, @json-render/core, @json-render/react and redux or @reduxjs/toolkit. No scripts are shipped; the skill is instructions only.

@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

bash

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

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 stateconst uiSlice = createSlice({  name: "ui",  initialState: { count: 0 } as Record<string, unknown>,  reducers: {    replaceUiState: (_state, action) => action.payload,  },});
// 2. Create the Redux storeconst reduxStore = configureStore({  reducer: { ui: uiSlice.reducer },});
// 3. Create the json-render StateStore adapterconst 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>

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 stateconst uiSlice = createSlice({  name: "ui",  initialState: { count: 0 } as Record<string, unknown>,  reducers: {    replaceUiState: (_state, action) => action.payload,  },});
// 2. Create the Redux storeconst reduxStore = configureStore({  reducer: { ui: uiSlice.reducer },});
// 3. Create the json-render StateStore adapterconst 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.

Source and attribution

Source:vercel-labs/json-renderinskills/reduxat commitfc2a696

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Redux

@json-render/redux

Installation

Usage

API

`reduxStateStore(options)`

Source and attribution

More from vercel-labs/json-render

Remotion

Zustand

Svelte

Xstate

Solid

Vue

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices