Если на странице 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;