Back to Details

redux

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

@json-render/redux

@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.
适配json-render的
StateStore
接口的Redux适配器，可将Redux store（或Redux Toolkit切片）用作json-render的状态后端。

Installation

安装

bash
npm install @json-render/redux @json-render/core @json-render/react redux
bash
npm install @json-render/redux @json-render/core @json-render/react redux

or with Redux Toolkit (recommended):

或使用Redux Toolkit（推荐）：

npm install @json-render/redux @json-render/core @json-render/react @reduxjs/toolkit
undefined
npm install @json-render/redux @json-render/core @json-render/react @reduxjs/toolkit
undefined

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: 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>
tsx
import { configureStore, createSlice } from "@reduxjs/toolkit";
import { reduxStateStore } from "@json-render/redux";
import { StateProvider } from "@json-render/react";

// 1. 为json-render状态定义切片
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>

API

API

reduxStateStore(options)

reduxStateStore(options)

Creates a 
StateStore
backed by a Redux store.
OptionTypeRequiredDescription
store
Store
YesThe Redux store instance
selector
(state) => StateModel
YesSelect the json-render slice from the Redux state tree. Use 
(s) => s
if the entire state is the model.
dispatch
(nextState, store) => void
YesDispatch an action that replaces the selected slice with the next state
The 
dispatch
callback receives the full next state model and the Redux store.
创建一个由Redux store提供支持的
StateStore
。
选项类型必填说明
store
Store
是Redux store实例
selector
(state) => StateModel
是从Redux状态树中选择json-render对应的切片。如果整个状态都是目标模型，可直接使用
(s) => s
。
dispatch
(nextState, store) => void
是派发一个action，用新的状态替换选中的切片
dispatch
回调会接收完整的新状态模型和Redux store。