• Как использовать useStore, useSelector, useDispatch hook?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    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 вам, действительно, понадобится на практике.
    Ответ написан
    Комментировать