конвертировать реагировать приложение, используя this.state для MOBX - PullRequest
Новая
       26

конвертировать реагировать приложение, используя this.state для MOBX

1 голос
/ 03 июля 2019

Я создал список задач в javascript с использованием реакции, так как я новичок в реакции, я использовал «this.state» для изменения состояния моего приложения в нескольких компонентах, моя проблема в том, что на собеседованииперед заданием создать список задач с использованием mobx для запуска его состояния, однако после долгих исследований у меня все еще остается много проблем с преобразованием this.state.todo моего реактивного проекта, вот основной компонент приложенияв коде мне бы понравилась демонстрация того, как преобразовать состояние в mobx наблюдатель / наблюдаемый, если нужно больше компонентов, я бы хотел добавить их 

import React from 'react';
import _ from 'lodash';
import TodoCreate from './todo-create';
import TodoList from './todo-list';
import 'semantic-ui-css/semantic.min.css';
import { Header } from 'semantic-ui-react';
import {decorate, observable} from "mobx"
import {observer} from "mobx-react"
export default class App extends 
React.Component {

constructor(props) {
    super(props);

    this.state = {
       todos : todos
    }

    this.createTask = this.createTask.bind(this);
    this.saveTask = this.saveTask.bind(this);
    this.deleteTask = this.deleteTask.bind(this);
    this.toggleTask = this.toggleTask.bind(this);
}

createTask(task) {
    this.state.todos.push({
        task,
        isCompleted: false,
        creationDate:new Date().toLocaleTimeString() + new Date().toLocaleDateString(),
        updateDate:new Date().toLocaleTimeString() +  new Date().toLocaleDateString()
    });
    this.setState({ todos: this.state.todos });
}

deleteTask(taskToDelete) {
    _.remove(this.state.todos, todo => todo.task === taskToDelete);
    this.setState({ todos: this.state.todos });
}

saveTask(oldTask, newTask) {
    const foundTodo = _.find(this.state.todos, todo => todo.task === oldTask);
    foundTodo.task = newTask;
    foundTodo.updateDate = new Date().toLocaleTimeString() +  new Date().toLocaleDateString();
    this.setState({ todos: this.state.todos });
}

toggleTask(task) {
    const foundTodo = _.find(this.state.todos, todo => todo.task === task);
    foundTodo.isCompleted = !foundTodo.isCompleted;
    foundTodo.updateDate = new Date().toLocaleTimeString() + '' + new Date().toLocaleDateString();
    this.setState({ todos: this.state.todos });
}

render() {
    return (
        <div>
            <div className="wrap">
            <div className="header">
                <Header as="h2" className="headerclass">ls-tech Todo-list</Header></div>
                  <div className="wrap-list">

            <div className="td-list-con">

                <TodoCreate
                    todos={this.state.todos}
                    createTask={ this.createTask}
                    />

                <TodoList
                    todos={ this.state.todos }
                    saveTask={ this.saveTask }
                    deleteTask={ this.deleteTask }
                    toggleTask={ this.toggleTask }
                    />
               </div>
            </div>
        </div>
    </div>
    )
}
}

1 Ответ

0 голосов
/ 03 июля 2019

Таким образом, mobx отличается от других систем управления состояниями, общих для реакции, в том, что mobx поддерживает изменяемое состояние. Таким образом, вместо того, чтобы делать все дополнительные шаблоны, чтобы не допустить изменения вашего состояния, вы просто вносите изменения, меняя то, что хотите изменить, «простым» способом.

Например, скажем, у вас есть коллекция объектов todo, которые имеют свойства description и isFinished. В Mobx вы просто возьмете свой todo item и todoItem.isFinished = true, чтобы установить для todo item значение true / флажок. Mobx позаботится обо всем остальном и уведомит соответствующие компоненты для обновления. В результате вам редко, если когда-либо нужно вызывать this.setState при использовании mobx. Любое изменение (в наблюдаемый объект) автоматически обновляет состояние.

Если вы не используете Mobx, вам необходимо убедиться, что вы никогда не мутировали значение, а вместо этого возвращали новую копию объекта, с той лишь разницей, что вы хотели изменить. Я полагаю, что именно поэтому вы используете методы объекта _: они помогают вам вносить изменения без изменения значений (хотя, похоже, вы все еще случайно изменяете объекты).

В обмен на эту простоту вам необходимо обеспечить несколько вещей: объекты, которые вы изменяете, должны быть observable, а компоненты, которые их отображают, должны быть observers . (см. документацию mobx )

Также , помните, что mobx наблюдает при изменении свойств , а не при значениях переменной . Таким образом, mobx может наблюдать это изменение: foo.bar = "new value", но не это изменение: let foo = 'initial value'; foo = 'new value' (обратите внимание на . в первом примере).

Поскольку это тестовый вопрос, я не буду исправлять ваш код для вас, но я отошлю вас к примеру приложения mobx todo , и, надеюсь, это поможет.

...