Передача модели из PHP/Laravel в магазин ReactJS Fluxible
В моем TaskController.php у меня есть:
namespace Api;
use Repos\EnquiryRepo;
class TaskController extends \BaseController {
protected $repo;
function __construct() {
parent::__construct();
$this->repo = new EnquiryRepo();
}
public function show($enquiryId)
{
if(!$enquiry = $this->repo->findById($enquiryId)) {
return $this->json('That does not exist.', 404);
}
return \View::make('task.index', ['enquiry' => $enquiry]);
}
}
Я совершенно заблудился относительно того, как я могу передать модель $ query в свое хранилище реакции:
EnquiryStore.js
import { EventEmitter } from 'events';
export default class EnquiryStore extends EventEmitter {
constructor() {
super();
this.enquiries = new Map();
this.loading = false;
}
handleEnquiriesData(payload) {
payload.data.enquiries.forEach((enquiry) => {
this.enquiries.set(enquiry.id, enquiry);
});
this.loading = false;
this.emit('change');
}
handleReceiving() {
this.loading = true;
this.emit('loading');
}
getEnquiries() {
return this.enquiries;
}
dehydrate () {
return this.enquiries;
}
rehydrate (state) {
}
}
EnquiryStore.handlers = {
'RECEIVED_ENQUIRIES_DATA': 'handleEnquiriesData',
'RECEIVING_ENQUIRIES_DATA': 'handleReceiving'
};
EnquiryStore.storeName = 'EnquiryStore';
Нужно ли мне как-то выводить его в переменную JS или что-то в этом роде? Как я могу заставить это работать? Все дело в том, что когда страница загружается, у меня уже есть все данные, и React/Fluxible не должен делать еще один запрос данных.
1 ответ
После небольшого количества ошибок и ошибок я получил это работающим:
По моему мнению Laravel я сделал:
@extends('layouts.react')
@section('css')
{{HTML::style('/css/task.css?bust=' . time())}}
@stop
@section('js')
<script>
app_dehydrated.context.dispatcher.stores.EnquiryStore = {{$enquiry}}
</script>
@stop
Тогда мой магазин:
import { EventEmitter } from 'events';
export default class EnquiryStore extends EventEmitter {
constructor() {
super();
this.enquiry = {};
this.loading = false;
}
handleReceiving() {
this.loading = true;
this.emit('loading');
}
getEnquiry() {
return this.enquiry;
}
dehydrate () {
return this.enquiry;
}
rehydrate (state) {
this.enquiry = state;
}
}
EnquiryStore.handlers = {
'RECEIVED_ENQUIRIES_DATA': 'handleEnquiriesData',
'RECEIVING_ENQUIRIES_DATA': 'handleReceiving'
};
EnquiryStore.storeName = 'EnquiryStore';
Если есть лучший способ, пожалуйста, скажите мне! Надеюсь, что это помогает другим.