@json_react_component/store

JsonReactState

react的全局状态管理, 类似与redux, 功能简单, 可以直接使用异步actions, 不需要引用多于的库

React's global state management is similar to redux. It has simple functions and can use asynchronous actions directly without referencing more libraries.

用法(example):

// main.tsx
import {store} from "store/index.ts";
const root = createRoot(document.getElementById('app')!);
root.render(
  <React.StrictMode>
    <StoreProvider ctx={store.ctx} initState={store.initState} reducer={store.reducer}>
      {/* Component */}
    </StoreProvider>
  </React.StrictMode>
);

// store/index.ts
import { createStore } from "@json_react_component/store";
import demoStore from "./demo.ts";

export const store = createStore({
  demo: demoStore // 这个名称最好和slice的namespace相同
})

// store/connect.tsx
import { ComponentType } from 'react';
import JsonState from "@json_react_component/store/types";
import { connect as _connect } from "@json_react_component/store";
import { store } from "./index.ts";

export const connect = <T extends JsonState.ConnectProps<S> = any, S = any>(com: ComponentType<T>, filter: (state: any) => S) => _connect<T, S>(store.ctx, com, filter) as any;

// store/demo.ts
import { createSlice, createRequestDebounce } from "@json_react_component/store";
import {Dispatch} from "react";

const initState: any = {
  data: {}
}

function req(){
  return new Promise((resolve, reject)=> {
    setTimeout(()=> {
      resolve(1)
    }, 2000)
  })
}

// createSlice参数 namespace, initData
const demoSlice = createSlice<any>("demo", initState);

// 做请求防抖
const reqDebounce = createRequestDebounce(req);

const setDataReducer = demoSlice.addReducer("setData", (state: any, payload: any) => {
  state.data = payload;
  return state
})

export const reqAction = async (dispatch: Dispatch<any>) => {
  try {
    const res = await reqDebounce();
    dispatch({ type: setDataReducer.type, payload: res })
  } catch (error) {
    console.error(error)
  }
}

export default demoSlice

// 组件中使用state和actions
import {connect} from "@/store/connect";
import {reqAction} from "@/store/demo.ts";

function Demo({state, dispath}){
  useEffect(()=> {
    reqAction(dispatch);
  }, [])
  return <div>{state}</div>
}

export default connect(Demo, (state)=> state);

反馈(Contact us)

欢迎建议和反馈bug到邮箱 [e-mail] 或 [e-mail] Welcome to provide suggestions and report bugs via email at [e-mail] or [e-mail].