Понимание синтаксиса функции connect () в реагировать на избыточность

Question

Я видел, что для подключения дочернего компонента внутри <Provider> к хранилищу избыточности мы используем функцию connect(). Это обычно пишется как:

const mapStateToProps = (state) => {
    return {name: state}
}

export default connect(mapStateToProps)(Name) //'Name' is the component's name.

Но я не понимаю синтаксис здесь. Здесь mapStateToProps() требует аргумента состояния. Но когда мы передаем mapStateToProps функции connect(), мы не передаем ей никакого состояния. И какая польза от (Name) сразу после connect()? Как это синтаксически правильно?

Answer 1

Что касается "странного" синтаксиса, просто представьте себе функцию, которая возвращает другую функцию:

function add(x) {
    return function (y) {
        return x + y;
    };
}

Здесь, если вы вызываете функцию add и передаете аргумент x, она вернетвнутренняя функция:

let inner = add(10);

И теперь вы можете вызвать саму внутреннюю функцию и передать аргумент y

let result = inner(11);

И result будет равен 21.

Короче говоря, можно записать два вызова вместе:

let result = add(10)(11);

Надеюсь, что в этом есть смысл.

Answer 2

упрощенный ответ будет следующим: когда вы передаете функцию mapStateToProps в connect, где-то в методе connect он вызывает mapStateToProps, который вы ему передали, и дает ей stateвам не нужно об этом беспокоиться.

вторая часть - странный синтаксис, в основном функция connect возвращает другую функцию, которую вы вызываете, и в этом случае передает ее компоненту Name.

Answer 3

Connect возвращает Компонент высшего порядка, который, по сути, является компонентом с некоторыми дополнительными функциями. Когда вы создаете HOC, вы сначала создаете оболочку (используя любую логику, которую хотите разделить между компонентами), которая затем принимает новый аргумент (имя компонента, которое вы упаковываете). Так что думайте об этом так:

const wrapper = connect(mapStateToProps); const HOC = wrapper(Name);

Connect также заботится о передаче избыточного хранилища в mapStateToProps в качестве аргумента состояния. Если вы не хотите, чтобы ваш компонент прослушивал хранилище, но хотел, чтобы он был подключен для какой-то другой используемой вами повторно используемой логики, вы можете вызвать connect()(Name), оставив аргумент для mapStateToProps undefined. Для вас не имеет смысла передавать это локальное состояние туда, потому что у вас уже есть доступ к локальному состоянию.