Если в Redux Store есть два компонента-счетчика, которые нужно привязать к двум свойствам, нужно ли вам дважды писать редуктор mapStateToProps и т. Д. c? - PullRequest
1 голос
/ 12 февраля 2020

Если на странице React / Redux уже есть компонент счетчика с кнопками + и - и счетчиком посередине, для countNoodle для количества заказанной лапши, а теперь, скажем, мы хотим чтобы добавить тот же счетчик для countDrink, нужно ли записать все редукторы, mapStateToProps, действия, соединение и т. д. c еще раз?

И когда мы добавим счетчик countSnack, напишем все эти строки еще раз?

Состояние хранилища будет выглядеть так:

{ countNoodle: 2, countDrink: 1, countSnack: 3}

Так что сейчас Магазин имеет только { count: 0 }. Когда требуется счетчик, привязанный к { countDrink: 0}, тогда следующие 50 строк кода должны быть записаны еще раз (с действиями countDrink, increaseDrink для Drink, et c)? И когда countSnack нужно добавить еще 50 строк кода?

Я мог бы ожидать, что это будет всего одна строка, что-то вроде:

Instantiate(Counter, '#counterNoodle', store, 'countNoodle');

И на самом деле, если мы позволим Counter используют локальное состояние и позволяют ему передавать счет обратно родителю с помощью обратного вызова, мы можем достичь его одной строкой:

<Counter updateCount={updateNoodleCount} />

Но если мы используем Redux, кажется, что мы имеем чтобы иметь намного больше кода, чем это.

Прямо сейчас это код для одного счетчика:

// reducer.js
function reducer(state = { count: 0 }, action) {
    if (action.type === 'inc') {
        return { count: state.count + 1 }
    } else if (action.type === 'dec') {
        return { count: state.count - 1 }
    } else {
        return state;
    }
}

// Counter.js
import React from 'react';
import { connect } from 'react-redux';

function Counter(props) {
    return (
        <div>
            { props.name }
            <button onClick={props.incCount}> + </button>            
            {props.countValue}
            <button onClick={props.decCount}> - </button>
        </div>
    );
}

function mapStateToProps(state) {
    return {
        countValue: state.count
    }
}

// Action

const incAction = { type: 'inc' },
    decAction = { type: 'dec' };

function mapDispatchToProps(dispatch) {
    return {
        incCount: function () {
            return dispatch(incAction);
        },
        decCount: function () {
            return dispatch(decAction);
        }
    }
}

let connectedComponent = connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter);

export default connectedComponent;

1 Ответ

0 голосов
/ 12 февраля 2020

Мне кажется, что вы должны исправить один редуктор для увеличения и один редуктор для уменьшения, чтобы получить обновляемый счетчик, а затем обновить состояние соответствующего счетчика. Вы должны были бы отобразить mapStateToProps для каждого счетчика.

onClick={this.props.incrementCounter(countDrink)}
onClick={this.props.incrementCounter(countDrink)}


const incrementCounter(counterToUpdate){
    this.setState({ 
        ...state,
        [counterToUpdate]: this.state.[counterToUpdate] + 1
    })
}

const decrementCounter(counterToUpdate){
    this.setState({ 
        ...state,
        [counterToUpdate]: this.state.[counterToUpdate] - 1
    })   
}

В вашем родительском компоненте вы могли бы иметь <Counter counter={this.props.countDrink} /> <Counter counter={this.props.countNoodle} /> <Counter counter={this.props.countSnack} /> Счетчик получит реквизит, который вы передадите, в зависимости от того, для какого элемента он ведет счет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...