Почему избыточное состояние не отображается на состояние реакции?

Question

Я очень новичок в React-Redux и столкнулся с методом, называемым mapstatetoprops .

Однако почему состояние избыточности не отображается на состояние реакции?Почему вместо этого он сопоставлен с реквизитом?

Answer 1

Основная причина (на мой взгляд):

"Тупые" компоненты имеют дело только со свойствами, а не с состоянием.

Одна из причин "тупых" компонентов состоит в том, что они тривиальныпроверить: все, что вам нужно сделать, это пройти в реквизит.Это означает, что независимо от того, откуда реквизиты берутся , единственное, что вы тестируете, это то, что они делают правильные вещи с любыми реквизитами, которые им дают.

Отображение хранилища избыточности в свойстваусиливает это понятие.После того, как вы введете состояние компонента, вам придется играть в более (несколько простых) игр для тестирования компонента, но он не так прост, как чистый компонент.

Answer 2

Потому что это рабочий процесс Redux.

Когда без редукса вы используете локальное состояние (состояние компонента) и передаете данные через родительский элемент дочерним элементам, это делает обмен данными очень сложным, когда у вас есть больше компонентов.

ComponentOne имеет данные, которые должны быть переданы в компонент 4:

ComponentOne -> ComponentTwo -> ComponentThree -> ComponentFour

В Redux у вас есть хранилище, но вы не можете использовать его как объект (геттеры и сеттеры)вы сопоставляете его содержимое с компонентами, которым необходимо каждое свойство.

Сценарий Redux:

store {userName: "user", otherData...}

Панель управления

function mapStateToProps(state) {
    return {
        userName : state.userName
}

Таким образом,Компонент будет прослушивать userName изменения, но может изменять данные только в хранилище с помощью mapDispatchToProps .Таким образом, Единственный Источник Истины Принцип Реакции гарантирован.

Answer 3

В React состояние принадлежит компоненту, а реквизиты передаются компоненту от его родителя.mapStateToProps() - это функция, которая используется внутри connect() для передачи данных из хранилища Redux в компонент.

Разница между состоянием и реквизитом: https://codeburst.io/react-state-vs-props-explained-51beebd73b21

Если вы хотитеиспользовать данные из хранилища Redux в состоянии компонента, компонент должен сначала получить его в качестве реквизита.После этого вы сможете отобразить его в состояние компонента в getDerivedStateFromProps.https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

Когда вы выводите состояние из реквизита таким образом, обновление состояния компонента не меняет состояние Redux.