Redux Как сделать меньше когда

Question

Как не писать в каждом компоненте mapStateToProps, mapDispatchToProps, connect, а архитектурно(лаконично) все это уменьшить?

const mapStateToProps = store => {
    return {
        store...
      }
  }

  const mapDispatchToProps = dispatch => {
    return {
      dispatch...
    }
  }

export default connect(mapStateToProps,mapDispatchToProps)(App);

Answer 1

Как вариант если компонент функциональный можно использовать react-redux хуки.

И connect не требуется.

Вместо mapStateToProps можно использовать useSelector.

А вместо mapDispatchToProps использовать useDispatch.

Доки

Пример cтандартный:

import React from "react";
import { connect } from "react-redux";
import { addCount } from "./store/counter/actions";

export const Count = ({ count, addCount }) => {
  return (
    <main>
      <div>Count: {count}</div>
      <button onClick={addCount}>Add to count</button>
    </main>
  );
};

const mapStateToProps = state => ({
  count: state.counter.count
});

const mapDispatchToProps = { addCount };

export default connect(mapStateToProps, mapDispatchToProps)(Count);

Пример хуками:

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { addCount } from "./store/counter/actions";

export const Count = () => {
  const count = useSelector(state => state.counter.count);
  const dispatch = useDispatch();

  return (
    <main>
      <div>Count: {count}</div>
      <button onClick={() => dispatch(addCount())}>Add to count</button>
    </main>
  );
};

БЛОГ НА HUSL

Redux Как сделать меньше когда

Ответы (1 шт):