1. useDispatch - получение функции store.dispatch в компоненте. Раньше для вызова action функциональный компонент приходилось оборачивать в вызов connect:
const Foo = ({ dispatch }) => {
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} />
);
};
export default connect()(Foo);
Сейчас:
const Foo = () => {
const dispatch = useDispatch();
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} />
);
};
export default Foo;
2. useSelector - маппинг значения из store.
Раньше:
const Foo = ({ value }) => {
return (
<Bar value={value} />
);
};
const mapStateToProps = state => ({
value: state.value,
});
export default connect(mapStateToProps)(Foo);
const Foo = () => {
const value = useSelector(state => state.value);
return (
<Bar value={value} />
);
};
export default Foo;
3. useStore - получение store целиком:
const valueSelector = state => state.value;
const Foo = () => {
const { dispatch, getState, subscribe } = useStore();
const value = valueSelector(getState());
useEffect(() => subscribe(console.log), []);
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} value={value} />
);
};
export default Foo;
Вряд ли useStore вам, действительно, понадобится на практике.
Средний
