reactjs - Cửa hàng React/Redux đang cập nhật nhưng Component không được render lại

Tôi đã thấy rất nhiều vấn đề trên SO/github với tiêu đề này, và tôi chắc chắn rằng thực sự không phải những việc sau gây ra lỗi này 99% thời gian: -kết nối component wrapper với MapStateToProps và MapDispatchToProps, -trả về State mới thay vì thay đổi trực tiếp state hiện tại trong reducer.

Trong tiện ích mở rộng redux devtools, tôi có thể thấy StoreState thay đổi với Todo mới trong danh sách khi tôi gửi một ADD_TODO. Khi tôi gửi một ADD_TODO, component Body không được render lại. Nếu tôi chèn một Todo vào StoreState ban đầu của todos, Todo đó được hiển thị trong component Body.

Bạn có thể tìm thấy kho lưu trữ ở đây

bộ giảm

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;
    }
}

Thành phần container:

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);

Thành phần không được cập nhật bởi các thay đổi của 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;

Câu trả lời #1

unshift làm thay đổi mảng, bạn cần trả về một mảng mới:

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