Обновление магазина React / Redux, но компонент не перерисовывается

Question

Я видел много проблем с SO / github с этим заголовком, и я уверен, что на самом деле не сделал то, что вызывает эту ошибку в 99% случаев: -подключить компонент оболочки с помощью MapStateToProps и MapDispatchToProps, - вернуть новое состояние вместо того, чтобы изменять текущее состояние в редукторе.

В расширении redux devtools я вижу, как StoreState меняется с новым Todo в списке, когда я отправляю ADD_TODO. Когда я отправляю ADD_TODO, компонент Body не перерисовывается. Если я ввожу Todo в начальный StoreState, то Todo отображается в компоненте Body.

Вы можете найти репозиторий здесь

редуктор:

import { TodoAction } from '../actions';
import { StoreState } from '../types/index';
import { ADD_TODO, TOGGLE_TODO } from '../constants/index';
import TodoModel from '../models/TodoModel';

export function todos(state: StoreState, action: TodoAction): StoreState {
    let todos: Array<TodoModel>;
    switch (action.type) {
        case ADD_TODO:
            todos = state.todos;
            todos.unshift(action.todo);
            return { ...state, todos: todos };
        case TOGGLE_TODO:
            todos = state.todos;
            const todo = todos.find(todo => todo.id === action.todo.id);
            if (todo !== undefined) {
                const key = todos.indexOf(todo);
                todos[key].done = true;
            }
            return { ...state, todos: todos };
        default:
            return state;
    }
}

Компонент контейнера:

export default connect(mapStateToProps, mapDispatchToProps)(Body);
import Body from '../components/Body/Body';
import { StoreState } from '../types/index';
import { connect } from 'react-redux';

export function mapStateToProps({ todos }: StoreState) {
    return {
        todos
    };
}

export function mapDispatchToProps() {
    return {
        //
    };
}
export default connect(mapStateToProps, mapDispatchToProps)(Body);

Компонент не обновляется изменениями storeState:

import * as React from 'react';
import TodoModel from '../../models/TodoModel';

interface Props {
    todos: Array<TodoModel>;
}

interface State {

}

class Body extends React.Component<Props, State> {

    constructor(props: Props) {
        super(props);
    }

    render() {
        console.log(this.props);
        return (
            <div>
                <ul>
                    {this.props.todos.map(todo => <li key={todo.id}>{todo.content}</li>)}
                </ul>
            </div>
        );
    }
}

export default Body;

Answer 1

unshift мутирует массив, вам нужно вернуть новый:

case ADD_TODO:
    todos = [...state.todos]; // or - state.todos.slice();
    todos.unshift(action.todo);
    return { ...state, todos: todos };