Redux Component不會在商店更改時更新

Question

我正在嘗試使用Redux + React - 我已經連接了Redux的相關位和connect()用於一個小的todo應用程序，但是我不能在我的生活中讓組件更新並顯示反映的商店更改。 存儲狀態確實更新但組件不會更新。 以下是我的代碼中的相關位：

actionTypes.js

export const ADD_TODO = "ADD_TODO";
export const DELETE_TODO = "DELETE_TODO";
export const CLEAR_TODO = "CLEAR_TODO";
export const COMPLETE_TODO = "COMPLETE_TODO";

reducers.js

import {ADD_TODO, COMPLETE_TODO, DELETE_TODO, CLEAR_TODO} from '../actions/actionTypes';
const todoApp = (state, action) => {
    let updatedState;
    switch (action.type) {
        case ADD_TODO:
            updatedState = Object.assign({}, state);
            updatedState.todo.items.push({
                text: action.text,
                completed: false
            });
            return updatedState;
        case COMPLETE_TODO:
            updatedState = Object.assign({}, state);
            updatedState.todo.items[action.index].completed = true;
            return updatedState;
        case DELETE_TODO:
            const items = [].concat(state.todo.items);
            items.splice(action.index, 1);
            return Object.assign({}, state, {
                todo: {
                    items: items
                }
            });
        case CLEAR_TODO:
            return Object.assign({}, state, {
                todo: {
                    items: []
                }
            });
        default:
            return state;
    }
};

export default todoApp;

actions.js

import {ADD_TODO, COMPLETE_TODO, DELETE_TODO, CLEAR_TODO} from './actionTypes.js';
export const addTodoCreator = (text) => {
    return {
        type: ADD_TODO,
        text: text,
        completed: false
    }
};

export const completeTodo = (index) => {
    return {
        type: COMPLETE_TODO,
        index: index
    }
};

export const deleteTodo = (index) => {
    return {
        type: DELETE_TODO,
        index: index
    }
};

export const clearTodo = (index) => {
    return {
        type: CLEAR_TODO,
        index: index
    }
};

AddTodoContainer.js

import { connect } from 'react-redux';
import TodoList from '../components/TodoList';
const mapStateToProps = (state, ownProps) => {
    return {
        todo: state.todo
    }

};

export default connect(mapStateToProps)(TodoList);

TodoListContainer.js

import { connect } from 'react-redux';
import {addTodoCreator} from '../actions/actions';
import AddTodo from '../components/AddTodo';
const mapStateToProps = (state) => {
    console.log(state);
    return {
        todo: state.todo
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        addTodo: (text) => {
            const action = addTodoCreator(text);
            dispatch(action);
        },
    }
};

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

AddTodo.js

import React from 'react'
const handler = (addTodo) => {
    const text = document.getElementById('textInput').value;
    addTodo(text);
};

const AddTodo = ({addTodo}) => {
    return (
        <div>
            <input id="textInput" type="text" className="textInput" />
            <button onClick={(handler).bind(null, addTodo)}>Add</button>
        </div>
    )
}

export default AddTodo

TodoList.js

import React from 'react';
import AddTodoContainer from '../containers/AddTodoContainer';

class TodoList extends React.Component {
    render () {
        console.log(this.props);
        return (
            <div>
                <ul>
                    {this.props.todo.items.map((item) => {
                        return <li>
                            {item.text}
                        </li>
                    })}
                </ul>
                <AddTodoContainer/>
            </div>
        )
    }
}

export default TodoList;

我已經嘗試了故障排除下的所有建議，據我所知，我沒有變異狀態。 減速器正在點火，我可以注銷狀態。 代碼存儲在react-fulltodo http://gogs.dev.dylanscott.me/dylanrhysscott/learn-redux下。

謝謝

迪倫

Answer 1

你將todo傳遞給你的組件，當todo對象得到更新時，redux狀態下的實際todo對象與之前的對象完全相同。 因此，反應看不到對象的變化。 例如：

const a = { foo: 'bar' };
const b = a;

b.foo = 'I made a change';
console.log(a==b); 
// logs true because a and b are the same object
// This is exactly what's happening in React.
// It sees the object as the same, so it does not update.

您需要克隆todo對象，以便react將其視為已更改/新對象。

在你的減速機：

switch (action.type) {
    case ADD_TODO:
        updatedState = Object.assign({}, state);
        // Shallow clone updatedState.todo
        updatedState.todo = Object.assign({}, updatedState.todo);
        updatedState.todo.items.push({
            text: action.text,
            completed: false
        });
        return updatedState;

同時，如果您將state.todo.items傳遞給組件，則不必克隆todo但您必須克隆items 。 因此，在未來，如果你有一些直接的組件mapStateToProps與state.todo.items ，它會因為你不是在克隆項目數組有同樣的問題ADD_TODO就像你在DELETE_TODO減速。