Passing a model from PHP/Laravel to ReactJS Fluxible store

Question

In my TaskController.php I have:

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]);

    }


}

I am totally lost as to how I can pass the $enquiry model into my react store:

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';

Would I need to somehow echo it out into a JS variable or something? How can I get this to work? The whole point is so that when the page loads I have all the data already and React/Fluxible doesn't need to make another request for the data.

score 0 · Answer 1 · answered May 19 '16 at 07:25

After a bit of trail and error I got it working:

In my Laravel view I did:

@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

Then my store:

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';

If there is a better way please tell me! Hope this helps others.

Passing a model from PHP/Laravel to ReactJS Fluxible store

1 Answers1