React - мне нужен Flux/Redux в этот момент? (связь между компонентами)

Question

Я нахожусь в точке своего приложения, у меня есть немного тупик, и я не совсем уверен, что делать.

В принципе, у меня есть компонент структуры, как это:

Layout 
    FilePage 
    FileDrop 
    BackgroundActivity 
    UploadQueue 
     FileUpload 

Так на каждой странице, то BackgroundActivity компонент есть, который будет показывать файлы в настоящее время загружены. Каждый FileUpload - это в основном измеритель хода и имя файла.

Проблема здесь, когда пользователь перетаскивает файл на FileDrop, мне нужно что-то отправить данные файла UploadQueue создать новую FileUpload, например:

UploadQueue = React.createClass({ 
    propTypes: { 
    fileList: React.PropTypes.any.isRequired 
    }, 

    statusChange(status) { 
    debugMode && console.info('[UploadQueue] Status change! %o', status); 
    }, 

    render() { 
    let files = []; 

    // Convert to a true array 
    for (let i = 0; i < this.props.fileList.length; ++i) { 
     files = files.concat(this.props.fileList[i]); 
    } 

    return (
     <div> 
     {files.map(file => { 
      return <FileUpload key={file.name} 
          name={file.name} 
          statusChange={this.statusChange} /> 
     })} 
     </div> 
    ) 
    } 
}); 

Кажется, что я должен был бы передать функцию обратного вызова от Layout до FilePage, вплоть до FileDrop, так что FileDrop может передать информацию о файле обратно вверх Layout, который затем отправить его вниз BackgroundActivity перейти к UploadQueue. Это похоже на грязный способ соединить внуков.

Я в точке, где мне нужен Flux или Redux? Я знаю, что эти рамки требуют уменьшить сложность, но, глядя на примеры Redux, кажется, просто добавить больше сложности. Или передаются функции на нескольких уровнях, как это делается в React?

Answer 1

Похоже, что вы можете быть готовы к флюсу/магазину, но вы можете сделать это без него. Просто лечите <Layout> как ваш командный центр. Определите свое состояние (включая fileList) и действия (включая addFileToList или что-то еще) здесь.

// in Layout 
... 
this.state = {fileList: []} 
... 
this.myActions = { 
    addToFileList: (file) => { 
     //add to the fileList with setState 
    } 
} 

Передайте эти действия и опишите их в дочерние компоненты.

<FilePage data={this.state} actions={this.myActions} /> 

<BackgroundActivity data={this.state} actions={this.myActions} /> 

Вы можете передать все от одного компонента к другому, как так

// in FilePage 
<FileDrop {...this.props} /> 

Так что ваши данные и действия доступны во всех компонентах. (Это хорошая отправная точка, но вы можете уточнить его немного раз все работает)

Затем в <FileDrop> вызова, что действие:

onChange(e) { 
    const myFile = // do some things 
    this.props.myActions.addToFileList(myFile); //goes all the way up to <Layout> 
} 

Даже если вы сделали есть магазин, это было бы все же лучше всего поддерживать только один компонент, подключенный к этому магазину, поэтому вы будете передавать действия одинаково. Вы бы привязывали магазин к реквизитам на Layout, хотя и передавали это вниз (а не состояние).

Образец такой же.

Answer 2

Что касается React, то оба этих подхода являются точными, т.е.:

• Некоторые люди передают функции и реквизита вниз детям
• Некоторые другие используют поток (у) архитектура (Redux, флюс, mobx ...)

ответить на ваши вопросы:

Я в точке, где мне нужен поток?

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

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

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

Кроме того, сообщество javascript утомляется новыми пакетами и его последователями каждый день. Redux + React приобрел сильный поклонник, настолько, что стал практически стандартным стандартом для реагирования приложений. Но это не означает, что это абсолютно необходимо.

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

Эта статья Дэна Абрамовым (автор Redux может быть помощь тоже): You might not need redux