import { createStore } from "@quarkunlimit/tiny";
// 推荐和useMethods useImmer 一起使用
import { useMethods } from "@quarkunlimit/react-hooks";
import { useImmer } from "@quarkunlimit/immer";
function useStore(props) {
const [state, setState] = useImmer({ xxxx });
const logic = useMethods({
fn1() {},
fn2() {},
});
const someMemoValue = useMemo(() => {
xx;
}, [xxx]);
// 返回key自己分组 可以不叫state logic memo 可以叫 data methods computed(很vue)
return {
props,
state,
logic,
memo: { someMemoValue },
};
}
const {Provider,useSelector} = createStore(useStore)
// 组件
const C = memo((props) => {
return (
// 将props传递给Provider,就可以在useStore处使用
<Provider {...props}>
<你的组件>
</Provider>
);
});
const 你的组件 = memo(()=>{
// 除了方法 其余必须精确到在组件使用的字段
const someValue = useSelector(x=>x.state.xxx)
const someProps = useSelector(x=>x.props.xxx)
// 使用useMethods 包裹的 随便解构,随便玩
const {fn1,fn2,fn3} = useSelector(x=>x.logic)
return xxx
})
// 多个store 不需要多个provider,使用qumobx组合方式
function useRootStore(props){
const a = useA()
const b = useB()
const c = useC()
return {a,b,c,props}
}
const {Provider,useSelector} = createStore(useRootStore)