[inulax] 修复状态管理器更新完值后,this.props里获取不到最新结果

This commit is contained in:
huangxuan 2023-11-30 16:15:44 +08:00
parent 0f87229318
commit e7dfd1b7e5
No known key found for this signature in database
GPG Key ID: E79F50C67022565D
1 changed files with 19 additions and 24 deletions

View File

@ -111,41 +111,36 @@ export function connect<StateProps, DispatchProps, OwnProps, MergedProps>(
//this component should bear the type returned from mapping functions //this component should bear the type returned from mapping functions
return (Component: OriginalComponent<MergedProps>): WrappedComponent<OwnProps> => { return (Component: OriginalComponent<MergedProps>): WrappedComponent<OwnProps> => {
const useStore = createStoreHook(options?.context || DefaultContext); const useStore = createStoreHook(options.context || DefaultContext);
//this component should mimic original type of component used //this component should mimic original type of component used
const Wrapper: WrappedComponent<OwnProps> = (props: OwnProps) => { const Wrapper: WrappedComponent<OwnProps> = (props: OwnProps) => {
const [f, forceReload] = useState(true); const store = useStore() as ReduxStoreHandler;
const [state, setState] = useState(() => store.getState());
const store = useStore() as unknown as ReduxStoreHandler;
useEffect(() => { useEffect(() => {
const unsubscribe = store.subscribe(() => forceReload(!f)); const unsubscribe = store.subscribe(() => {
return () => { setState(store.getState());
unsubscribe(); });
}; return () => unsubscribe();
}, []);
const previous = useRef<{ state: { [key: string]: any }, mappedState: StateProps }>({
state: {},
mappedState: {} as StateProps,
}); });
const previous = useRef({
state: {},
mappedState: {},
}) as {
current: {
state: { [key: string]: any };
mappedState: StateProps;
};
};
let mappedState: StateProps; let mappedState: StateProps;
if (options?.areStatesEqual) { if (options.areStatesEqual) {
if (options.areStatesEqual(previous.current.state, store.getState())) { if (options.areStatesEqual(previous.current.state, state)) {
mappedState = previous.current.mappedState as StateProps; mappedState = previous.current.mappedState as StateProps;
} else { } else {
mappedState = mapStateToProps ? mapStateToProps(store.getState(), props) : ({} as StateProps); mappedState = mapStateToProps ? mapStateToProps(state, props) : ({} as StateProps);
previous.current.mappedState = mappedState; previous.current.mappedState = mappedState;
} }
} else { } else {
mappedState = mapStateToProps ? mapStateToProps(store.getState(), props) : ({} as StateProps); mappedState = mapStateToProps ? mapStateToProps(state, props) : ({} as StateProps);
previous.current.mappedState = mappedState; previous.current.mappedState = mappedState;
} }
let mappedDispatch: DispatchProps = {} as DispatchProps; let mappedDispatch: DispatchProps = {} as DispatchProps;
@ -154,6 +149,7 @@ export function connect<StateProps, DispatchProps, OwnProps, MergedProps>(
Object.entries(mapDispatchToProps).forEach(([key, value]) => { Object.entries(mapDispatchToProps).forEach(([key, value]) => {
mappedDispatch[key] = (...args: ReduxAction[]) => { mappedDispatch[key] = (...args: ReduxAction[]) => {
store.dispatch(value(...args)); store.dispatch(value(...args));
setState(store.getState());
}; };
}); });
} else { } else {
@ -168,10 +164,9 @@ export function connect<StateProps, DispatchProps, OwnProps, MergedProps>(
}) })
)(mappedState, mappedDispatch, props); )(mappedState, mappedDispatch, props);
previous.current.state = store.getState(); previous.current.state = state;
const node = createElement(Component, mergedProps); return createElement(Component, mergedProps);
return node;
}; };
if (options.forwardRef) { if (options.forwardRef) {