избыточное использование в целом

Question

прошу прощения за не конкретный вопрос, но я немного запутался.Я начал изучать редукс, и теперь мне нужно реализовать его в полностью работающем проекте: https://github.com/CodeNinja1395/Test-task-for-inCode и есть ветка для редукс-версии (которая, очевидно, не работает).Основная логика моего приложения, расположенного в файле ContactsApp.js:

class ContactsApp extends Component {
  constructor(){
    super();
    this.state = {
      searchResults: [],
      displayedUsers: [],
      displayedInfo: [],
      selectedUser: null,
      searchValue: ''
    }

  }

  componentWillMount() {
    this.props.fetchData();
  }

  handleSearch(event){
    let CONTACTS = this.props.items;
    let inputValue = event.target.value;
    this.setState({searchValue: inputValue});
    let iterate = function(obj, callback) {
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                    iterate(obj[property], callback);
                } else {
                    callback(obj[property]);
                }
            }
        }
    }

    let searchResults = [];

    CONTACTS.forEach(el => { //this finds all matches (except avatar)
      let arr = [];
      iterate(el, function (e) {
        if (e!=el.general.avatar)
           arr.push(e);
      });

      for (var i = 0; i < arr.length; i++) {
          if(arr[i].toLowerCase().indexOf(inputValue) !== -1){
            searchResults.push(el.foundValue = arr[i]);
          }
        }
    });

    var displayedUsers = CONTACTS.filter(el => { //this finds element by first match (except avatar)

      let arr = [];
      iterate(el, function (e) {
        if (e!=el.general.avatar)
           arr.push(e);
      });

      for (var i = 0; i < arr.length; i++) {
          if(arr[i].toLowerCase().indexOf(inputValue) !== -1){
            el.foundValue = arr[i];
            return arr[i];

          }
        }
    });

   this.setState({searchResults:  searchResults});
   this.setState({displayedUsers: displayedUsers});

  }

  handleSelectedUser(user, color){
    this.setState({selectedUser: user}, function (){
    });
  }


  render() {
    let users;

    let selectElem = this.selectElement;

    if (this.state.displayedUsers) {
      users = this.state.displayedUsers.map(user => {

        return (
          <User
            key={user.contact.phone}
            user={user}
            color={(user==this.state.selectedUser) ? 'LightSkyBlue ' : 'white'}
            selectUser={this.handleSelectedUser.bind(this)}
            searchValue={this.state.searchValue}
            searchResults={this.state.searchResults}
          />
        );
      });
    }


    return (
      <div>
        <div className="left-column">
          <div className="users">
              <SearchUser handleEvent= {this.handleSearch.bind(this)} />
              <ul className="usersList"> {users} </ul>
          </div>
        </div>
        <div className="right-column">
          <ContactDetail selectedUser={this.state.selectedUser} />
        </div>
      </div>
      );
    }
}

const mapStateToProps = state => ({
  data: state.data
});



export default connect(mapStateToProps, {fetchData})(ContactsApp);

Я знаю, что вопрос слишком абстрактный, и, вероятно, когда я лучше изучу редукс, это будет очевидно, но я застрял с этим ине знаю с чего начать.

Answer 1

Я не совсем понимаю, что делает ваше приложение, поэтому мой ответ также будет довольно общим.

Начните с настройки проекта с помощью redux.Вам нужны пакеты redux и реагировать на восстановление.Используйте учебник с официальной страницы.Установите расширения Chrome Redux Dev Tools, чтобы иметь возможность отлаживать и просматривать состояние избыточности.

Затем продолжите рефакторинг ...

Начните с изоляции моделей данных,Вероятно, у вас будет user и какой-то displayFilter.Создайте редукторы для них обоих.

Держите всех пользователей в редукторе user, а текущее состояние фильтра - в displayFilter.Установите некоторые проверенные данные в качестве состояния по умолчанию.

Объедините настройки фильтрации из displayFilter и список пользователей из user на лету в mapStateToProps.Выполните фильтрацию видимых в данный момент пользователей в mapStateToProps, чтобы ваш компонент получал только пользователей, которые должны быть видимыми.

Затем добавьте некоторые динамические элементы

Каждый раз, когдаПользователь изменяет некоторые настройки фильтрации, отправляет действие с новыми настройками и обрабатывает его в displayFilter, применяет изменения в хранилище.React-redux автоматически вызывает ваш mapStateToProps и применяет новый список отфильтрованных пользователей к компоненту и запускает рендеринг.

Дальнейшие действия

Это всего лишь пара подсказоккак начать.Если вы хотите, чтобы ваше приложение было производительным и стабильным, вам следует ознакомиться с концепциями запоминания, перевыбора и библиотек immutable.js.