反應：如何“記住”最初的道具

Question

我正在玩React和Redux，並構建了一個簡單的todo-app。 現在，我想為用戶創建一個保存按鈕，該按鈕將保存對待辦事項的更改（如果有的話）（即更改文本）。 因此，保存按鈕需要知道是否對待辦事項進行了任何更改。

例如，最初我們有來自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',
    }
]

所以我的問題是，我怎么能發現這些變化？

Answer 1

您可以通過多種方式執行此操作。 您可以通過類似以下方式使用構造函數來記住初始道具：

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

由於您正在使用redux，因此您也可以在中間件中進行處理，該中間件的主要工作是檢查並查看要保存的數據是否不同於存儲在存儲中的值。 這是redux中的中間件文檔。

Answer 2

您可以在分派更改待辦事項的操作時分派一個操作以通知保存按鈕。 同樣，如果您的減速器是純色的，則它不會改變先前的狀態，因此很容易知道待辦事項是否已更改。 如果對象引用不同，則將其更改。

Answer 3

因為這樣做的目的是學習React + Redux的最佳實踐，所以做到這一點的最佳方法是讓自己的道具成為來自Redux狀態的待辦事項，然后讓組件狀態成為當前正在突變為的狀態。 因此，在上述示例中，

饋入組件props的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進行比較，以了解情況如何變化。

然后，您分派操作以將save(this.state.todos)到您的redux狀態（例如： save(this.state.todos)

您的組件應該通過諸如reselect類的庫監聽Redux狀態，並且其道具將被更新。

Answer 4

如果您使用的是笨拙的中間件，則可以編寫一個動作創建器，例如

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