Передача модели из 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';

Если есть лучший способ, пожалуйста, скажите мне! Надеюсь, что это помогает другим.

Другие вопросы по тегам