React/Redux 存储更新但组件未重新渲染

Posted 2023-03-31

【中文标题】React/Redux 存储更新但组件未重新渲染

【英文标题】：React/Redux store updating but Component not re-rendering

【发布时间】：2018-10-15 17:08:50

【问题描述】：

我已经看到了很多关于这个标题的 SO/github 问题，我确信实际上 99% 的时间都没有做导致这个错误的原因： -将包装器组件与 MapStateToProps 和 MapDispatchToProps 连接， -返回新状态而不是在reducer中改变实际状态。

在 redux devtools 扩展中，当我调度 ADD_TODO 时，我可以看到 StoreState 随着列表中的新 Todo 发生变化。当我调度 ADD_TODO 时，不会重新渲染 Body 组件。 如果我在 todos 初始 StoreState 中注入一个 Todo，则 Todo 会显示在 Body Component 中。

你可以找到仓库here

减速器：

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;

【参考方案1】：

unshift 改变数组，需要返回一个新的：

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

【讨论】：

谢谢，就是这样。

@CTaque 确定。如果我帮助了，请投票或接受答案。