2015-09-30 3 views
0

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

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

Моя структура кода:

У меня есть приложение, которое выводит из двух компонентов. CarList и CarDetails. Сначала детали автомобилей скрыты. Причина, по которой я сделал carDetails в приложении, - это массивный шаблон исправления, поэтому я хотел бы сделать это один раз, когда приложение будет загружено, и только обновить его данные, когда каждая строка будет нажата.

CarList также отображает компонент CarRow, который хорош. Теперь моя проблема в том, что у меня есть функция getDetails на компоненте CarRow, которая делает звонок, чтобы получить информацию на основе идентификатора автомобиля. Как обновить данные компонента carDetails? Я использовал this.setState ({itemDetails: data}); , но, похоже, состояние carRow - это не та же ссылка, что и состояние в carDetails.

Любая помощь?

ответ

2

Это фундаментальная проблема, с которой многие мысли и человеко-часы прошли, чтобы попытаться решить. Вероятно, на столбе StackOverflow не может быть дан ответ, кроме как на уровне поверхности. Это также не является реакционно-ориентированным. Это проблема большинства приложений, независимо от используемой структуры.

Поскольку вы спросили в контексте React, вы можете рассмотреть возможность чтения в flux, что является де-факто реализацией этой односторонней идеи потока данных совместно с React. Однако эта архитектура ни в коем случае не является «лучшей». Для него есть просто преимущества и недостатки, как и все остальное.

Некоторым людям не нравится идея глобального «автобуса событий», предлагаемого флюсом. Если это так, вы можете просто реализовать свой собственный API промежуточного уровня данных, который собирает обратные вызовы запросов, и A) вызывает обратные вызовы при любых вызовах для сохранения данных и B) обновляет любые соответствующие запросы к серверу. На данный момент, однако, я буду придерживаться потока, поскольку это даст вам представление об общих принципах, связанных с тем, что большинство людей считают «хорошим», как один источник истины для ваших данных, один путь потока и т.д.

чтобы дать конкретный пример идей обратного вызова:

// data layer 

const listeners = []; 

const data = { 
    save: save, 
    query: query 
}; 

function save(someData) { 
    // save data to the server, and then... 
    .then(data => { 
    listeners.forEach(listener => listener(data)); 
    }); 
} 

function query(params, callback) { 
    // query the server with the params, then 
    listeners.push(callback); 
} 

// component 

componentWillMount() { 
    data.query(params, data => this.setState({ myData: data })); 
}, 

save() { 
    // when the save operation is complete, it will "refresh" the query above 
    data.save(someData); 
} 

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

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

Смежные вопросы