@json_react_component/store v1.0.3

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到邮箱 lijunsong2@gmail.com 或 2622336659@qq.com Welcome to provide suggestions and report bugs via email at lijunsong2@gmail.com or 2622336659@qq.com.