Вынесение управления состоянием компонентов в пользовательские классы в React12.09.2016 15:18

import {DefaultStore} from 'ui-states';
class Stores{
    //в параметре конструктора DefaultStore указываем идентификатор/ключ хранилища, по которому к нему можно будет обращаться.
    static customers = new DefaultStore('customers'); 
}

import Stores from './stores.js'
//импорт из библиотеки дефолтного класса, который отвечает за работу с UI состоянием компонента
import {DefaultUIState} from 'ui-states' 

class List extends Component
    componentWillMount() {
        //создаем UIState для данного компонента. 
        //В первом параметре передаем ссылку на компонент. 
        //Во втором – объект, который хранит дополнительные данные состояния компонента, не связанные с хранилищем. 
        //Это практически то же, что и обычный state в компонентах. В него нужно помещать все, что нужно хранить в состоянии
        //компонента, но не нужно хранить в store. Обращаться к этим данным можно через объект model: 
        //this.uiState.model.myField.
        //В третьем параметре передается массив объектов с параметрами. В каждом таком объекте хранится ссылка на store и 
        //дополнительные параметры, говорящие о том, как работать с данным хранилищем в текущем UIState.
        this.uiState = new DefaultUIState(this, null, [{store: Stores.customers }]);    
   }
  
   componentWillUnmount() {
       this.uiState.removeState(); //удаляем UIState при демонтировании компонента
   }

   handleClick() {
        //запись/обновление данных в хранилище
        Stores.customers.update({
            items: [
                {id: 1, name: 'Alexey', city: 'Moscow', email: 'alexey@gmail.com'},
                {id: 2, name: 'Andrey', city: 'Bangkok', email: 'andrey@gmail.com'},
                {id: 3, name: 'Anatoly', city: 'Singapore', email: 'anatoly@gmail.com'}
            ]
        });
    }

    render() {
        return (
            

                Load data
                


                //считываем данные из UIState. В функции get указывается путь к нужному свойству в UIState
                 
                    

                        {item.name} 
                        {item.city} 
                        {item.email}
                    
                
            
        )
    }
}

Опишу, как нужно выполнять чтение и запись в uiState.

Чтение:
let field1 = this.uiState.store_key.field1;
Либо let field1 = this.uiState.get ('store_key.field1');
Если данные хранятся только в state, без использования Store, то данные хранятся в объекте model: let field1 = this.uiState.model.field1.

Запись:
this.uiState.set ('store_key.field1', newValue).
Опять же, если данные нужно хранить без использования Store, то используем model: this.uiState.set ('model.field1', newValue).

1. Создание хранилища

import {DefaultStore} from 'ui-states';
export default class Stores{
    static currentCustomer = new DefaultStore('currentCustomer');
}

import Stores from './stores.js'

export default class Network {
    static getCustomer() {
      //Тут какая-нибудь сетевая логика, возвращающая ответ с данными.
      //В данном примере возвращаются данные в следующем формате: 
      //{id: 1, name: 'Alexey', city: 'Moscow', email: 'alexey@gmail.com'}, 
      //Далее сохранение объекта с данными, пришедшими от сервера.
      //Здесь используется replace, а не update, потому-что при update происходит мердж полей объекта из store с новым объектом.
      //При replace старый объект полностью заменяется новым.
      //В данном случае может смениться один customer на другого, поэтому здесь нужно использовать replace.
      // При сохранении объекта или же при получения списка подойдет update.
      Stores.currentCustomer.replace(responceData);
    }
   }

   static saveCustomer(customer) {
      //Тут какая-нибудь сетевая логика, отправляющая данные на сервер и возвращающая response с данными. 
      //В данном примере данные возвращаются в следующем формате:
      //{id: 1, name: 'Alexey', city: 'Moscow', email: 'alexey@gmail.com'}, 

      //Далее обработка полученного результата:
      if (response.ok) {
        Stores.currentCustomer.update(null, responceData);
      }
      else {
        //При ошибке обновляем не customer-а, а данные для его валидации в форме.
        //В данном примере возвращаются данные в следующем формате: 
        //{name: 'errorMessage', city: 'ErrorMessage', email: 'errorMessage'}. 
        //В  возвращаемом объекте присутствуют только поля с ошибками валидации.
        Stores.currentCustomer.update(null, responceData); 
      }
    }

    //Сохранение только одного поля в форме. Во втором параметре передается путь к нужному свойству в хранилище.
    static saveCustomerCity(customer, pathInStore) {
      //Тут какая-нибудь сетевая логика, отправляющая данные на сервер и возвращающая response с данными.
      //В данном примере возвращаются данные в следующем формате: { city: 'Moscow'}, 
      if (response.ok) {
        Stores.currentCustomer.updateField(responseData.city, pathInStore);
      }
      else {
        //В данном примере возвращаются данные в следующем формате:  {city:'errorMessage''}
        Stores.currentCustomer.updateField(null, responseData.city, pathInStore);
      };
    }
}

import Stores from './../stores.js'
import Network from './../network.js' //класс с сетевыми методами
import {DefaultUIState } from 'ui-states'
//Компонент - обертка над input. В нем также присутствуют поля для вывода названия поля и текста ошибки
import InputWrapper from './input-wrapper.js' 

export default class CustomerForm extends Component {
    componentWillMount() {
        this.uiState = new DefaultUIState(this, null, [{store:  Stores.currentCustomer }]);
        Network.getCustomer();
    }

    componentWillUnmount() {
        this.uiState.removeState();
    }

    handleCancel() {
        this.uiState.cancelAllChanges(); //отмена всех изменений в UIState. Значение станут такими же, как в store
    }

    handleSave() {
        Network.saveCustomer(this.uiState.currentCustomer);
    }

    handleCancelCity() {
        this.uiState.cancelChangesByPath('city', mainStore); //отменяет изменения только в поле ‘city’
    }

    handleSaveCity() {
        Network.saveCustomerCity(this.uiState.currentCustomer);
    }

    //Преобразование различных данных в props для input, чтобы не копировать один и тот же код
    mapToInputProps(field) {
        return {
            type: "text",
            name: field,
            parentUiState: this.uiState,
            pathToField: 'currentCustomer', //полный путь к полю получиться следующий:  this.uiState.currentCustomer
            pathToValidationField: 'currentCustomer.validationData'  //полный путь к полю получится следующий:
                                                                     //this.uiState.currentCustomer.validationData
        };
    }

    render() {
        return (
            

                

                    
                    
                    
                
                Cancel
                Save
                


                Cancel city only
                Save city only
            
        )
    }
}