Question

我正在玩React和Redux并构建了一个简单的todo-app。现在，我想为用户创建一个保存按钮，如果有任何（即更改文本），将保存对待办事项所做的更改。所以保存按钮需要知道是否对todos做了任何更改。

例如，最初我们有来自Redux的这些待办事项：

const todos = [
    {
        id: 0,
        text: 'Learn Redux',
    },
    {
        id: 1,
        text: 'Learn React',
    }
]

但是用户对todos进行了一些更改！

const todos = [
    {
        id: 0,
        text: 'Eat a cookie',
    },
    {
        id: 1,
        text: 'Read a book',
    }
]

所以我的问题是，如何检测这些变化？

Answer 1

有很多方法可以做到这一点。您可以通过执行以下操作来使用构造函数来记住初始道具：

constructor(props) {
   super(props);
   this.initialProps = props;
}

由于您使用的是redux，您还可以在中间件中处理此问题，中间件的主要工作是检查并查看您尝试保存的数据是否与商店中保存的值不同。 Here是redux中的中间件文档。

Answer 2

每当您发送更改待办事项的操作时，您都可以调度操作以通知保存按钮。此外，如果您的减速器是纯净的，它不会改变以前的状态，因此很容易知道待机是否已经改变。如果对象引用不同，则会更改。

Answer 3

由于这是为了学习React + Redux的最佳实践，最好的方法是让你的道具成为来自你的Redux状态的todos，然后让你的组件状态为目前的任何状态被改变为。所以在上面的例子中，

提供给组件道具的Redux状态是

const todos = [
    {
        id: 0,
        text: 'Learn Redux',
    },
    {
        id: 1,
        text: 'Learn React',
    }
]

然后组件状态为

const todos = [
    {
        id: 0,
        text: 'Eat a cookie',
    },
    {
        id: 1,
        text: 'Read a book',
    }
]

在你的构造函数中，你会做类似的事情（_是像lodash这样的库）：

constructor(props) {
   super(props);
   this.state = { todos: _.clone(props.todos) };
}

该组件只会操纵this.state.todos，然后当您准备保存时，您可以将this.state.todos与this.props.todos进行比较，看看事情是如何变化的。

然后您调度操作以将待办事项保存到您的redux状态（例如：save(this.state.todos)

您的组件应该通过reselect这样的库来监听Redux状态，并且它的道具将会更新。

Answer 4

如果您正在使用thunk中间件，那么您可以编写一个像

这样的动作创建者

const getTodos = (getState)=>getState().todos;
const saveAction = newTodos=> async(dispatch, getState)=>{
    const initialTodos = getTodos(getState()); 
    await dispatch('SAVE_ACTION', newTodos);
    const finalTodos = getTodos(getState());
    if(initialTodos !== finalTodos){
           dispatch('UPDATE_TODOS_IN_SERVER', finalTodos);
    }
}

反应：如何记住＆＃34;初始道具

4 个答案: