Redux适配器：将Redux状态管理无缝集成到json-render框架中
redux by vercel-labs/json-render
安装命令
npx skills add https://github.com/vercel-labs/json-render --skill redux🇨🇳中文介绍
@json-render/redux
适用于 json-render StateStore 接口的 Redux 适配器。将 Redux store（或 Redux Toolkit slice）作为 json-render 的状态后端。
安装
npm install @json-render/redux @json-render/core @json-render/react redux
# 或使用 Redux Toolkit（推荐）：
npm install @json-render/redux @json-render/core @json-render/react @reduxjs/toolkit
用法
import { configureStore, createSlice } from "@reduxjs/toolkit";
import { reduxStateStore } from "@json-render/redux";
import { StateProvider } from "@json-render/react";
// 1. 为 json-render 状态定义一个 slice
const uiSlice = createSlice({
name: "ui",
initialState: { count: 0 } as Record<string, unknown>,
reducers: {
replaceUiState: (_state, action) => action.payload,
},
});
// 2. 创建 Redux store
const reduxStore = configureStore({
reducer: { ui: uiSlice.reducer },
});
// 3. 创建 json-render StateStore 适配器
const store = reduxStateStore({
store: reduxStore,
selector: (state) => state.ui,
dispatch: (next, s) => s.dispatch(uiSlice.actions.replaceUiState(next)),
});
// 4. 使用它
<StateProvider store={store}>
{/* json-render 的读写操作将通过 Redux 进行 */}
</StateProvider>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
