Я играю с React и Redux и создаю простое todo-приложение. Теперь я хочу создать для пользователя кнопку сохранения, которая будет сохранять изменения, внесенные в задачи, если они были (т.е. изменение текста). Таким образом, кнопка сохранения должна каким-то образом знать, были ли какие-либо изменения, внесенные в задачи.

Например, изначально у нас есть следующие задачи, которые приходят из 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',
    }
]

Итак, мой вопрос, как я могу обнаружить эти изменения?

0
feerlay 27 Авг 2017 в 23:39

4 ответа

Лучший ответ

Поскольку цель этого состоит в том, чтобы изучить лучшие практики, связанные с React + Redux, лучшим способом сделать это было бы, чтобы ваши реквизиты были тодо, поступающими из вашего состояния Redux, а затем чтобы состояние вашего компонента было таким, каким оно в данный момент изменяется. , Итак, в приведенном выше примере,

Состояние 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 через такую библиотеку, как reselect, и его реквизиты будут обновлены.

0
TheBottleSeller 28 Авг 2017 в 07:39

Вы можете отправить действие, чтобы уведомить кнопку «Сохранить» всякий раз, когда вы отправляете действие, изменяющее задачи. Также, если ваш редуктор чистый, он не будет изменять предыдущее состояние, поэтому легко узнать, изменились ли задачи. если ссылка на объект отличается, она изменяется.

0
19 Апр 2018 в 13:35

Если вы используете промежуточное программное обеспечение 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);
    }
}
0
Shishir Arora 28 Авг 2017 в 07:51

Есть много способов сделать это. Вы можете использовать конструктор для запоминания начальных реквизитов, выполнив что-то вроде:

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

Поскольку вы используете redux, вы можете также справиться с этим в промежуточном программном обеспечении, основная задача которого - проверить и проверить, отличаются ли данные, которые вы пытаетесь сохранить, от значения, которое хранится в хранилище. Здесь приведены документы для промежуточного программного обеспечения в режиме редукции.

0
Joseph Ditton 27 Авг 2017 в 22:17