Компонент не обновляется после вызова отправки

Question

У меня есть приложение списка реактивных ответов, которое я пытаюсь понять, как работает избыточность.Я создал приложение для начинающих.

У меня проблема в том, что дочерний компонент ToDoList.jsx не обновляется, когда dispatch вызывается из другого файла, но mapStateToProps вызывается и возвращает правильную информацию.Компонент просто не перерисовывается.

Описание приложения

Есть два компонента (кроме app.js), AddToList.jsx, который имеет метку, которая отражает текстовое поле, икнопка, позволяющая добавлять объекты в массив списков дел.

Далее есть дочерний компонент с именем ToDoList.jsx, который отображает массив элементов дел.

CodeSandbox

App.js

...
  <div className="App">
    <Provider store={store}>
          <AddToList />
    </Provider>
  </div>
...

AddToList.jsx

...
    <>
        <input type="text" value={props.inputText} placeholder="To do item" onChange={props.inputChangeHandler}/>
        <button type="button" onClick={props.addToListHandler}>Add To List</button>
        <ToDoList />
    </>
...



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

function mapDispatchToProps(dispatch) {
    return {
        inputChangeHandler: (evt) => {
            const action = {type: 'INPUT_CHANGE', text: evt.target.text};
            dispatch(action);
        },
        addToListHandler: () => {
            const action = {type: 'ADD_TO_LIST'};
            dispatch(action);
        }
    }
}

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

ToDoList.jsx

import React from 'react';
import { connect } from 'react-redux';

const ToDoList = (props) => {

    return ( 
        <ul>
            {props.toDoList.map((toDoItem, index) => {
                return <li key={index}>{toDoItem}</li>
            })}
        </ul>
     );
}




function mapStateToProps(state) {
    console.log(state.toDoList);
    // ******* Gets Called, and logs correct data **********

    return {
        toDoList: state.toDoList
    };
}


export default connect(
    mapStateToProps
)(ToDoList);

Answer 1

Проблема в том, что вы используете этот фрагмент кода:

case "ADD_TO_LIST":
  newState.toDoList.push(state.inputText);
  break;

Поскольку вы push в массиве newState.toDoList, редуктор возвращает тот же объект (но мутированный).connect предоставит тот же объект для компонента React при изменении состояния.Однако React не будет обновлять список, поскольку это один и тот же объект (по ссылке).

Вместо этого вы можете сделать что-то подобное, не изменяя исходный объект:

case "ADD_TO_LIST":
  const toDoList = [...state.toDoList, state.inputText];
  newState = {
    ...state,
    toDoList
  };
  break;

См. Действие здесь: https://codesandbox.io/s/11764qzpj (Но обратите внимание, что все еще есть ошибка! Попробуйте отредактировать ввод и добавить его в список. Я оставлю это как упражнение для вас).

---

Примечание: Я также отметил, что вы создаете newState каждый раз, когда вызывается редуктор.Но это ненужно и часто вредно.Если состояние не меняется, вы всегда должны возвращать исходный объект state.В противном случае React будет думать, что состояние изменилось, и излишне попытается повторно выполнить рендеринг компонентов.