reflux / refluxjs

A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux
BSD 3-Clause "New" or "Revised" License
5.36k stars 330 forks source link

init not firing #532

Closed dagostinelli closed 6 years ago

dagostinelli commented 7 years ago

In the past, we could put an init function on a store and it would fire automatically for us. I can't get it to do that now. Here's some code. What is the new way to do this?

import Reflux from 'reflux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';

let React = require('react');
let ReactDOM = require('react-dom');
let domReady = require('domready');

var Actions = Reflux.createActions(['reload']);

class MyStore extends Reflux.Store
{
    constructor()
    {
        super();
        this.state = {some_text: "text is not loaded yet"};
        this.listenables = Actions;
    }

    init()
    {
        alert('hi');
        this.reload();
    }

    reload()
    {
        // go to server and get some_text
        //this.state.some_text = "hello, world";
        this.setState({some_text: "hello, world"});
    }
}

class HomeContainer extends Reflux.Component
{
    constructor(props)
    {
        super(props);
        this.state = {};
        this.store = MyStore;
    }

    render()
    {
        return <Home some_text={this.state.some_text}/>
    }
}

class Home extends Reflux.Component 
{
    render () {
        return (
            <div className="row">
                <div className="column small-12">
                    {this.props.some_text}
                </div>
            </div>
        );
    }
}

class App extends React.Component 
{
    render()
    {
        return (
            <div>
                Header
                {this.props.children}
                Footer
            </div>
        );
    }
}

function renderRouter()
{
    ReactDOM.render((
        <Router>
            <App>
                <Switch>
                    <Route exact path="/" component={HomeContainer}/>
                </Switch>
            </App>
        </Router>

    ), document.getElementById('root'));
}

domReady(function () {
    renderRouter();
});

registerServiceWorker();
eek commented 7 years ago

Why would you need that?

Now .init() is the actual constructor(), you can move everything you have from your .init() to the constructor()

In your case, this:

    {
        super();
        this.state = {some_text: "text is not loaded yet"};
        this.listenables = Actions;
    }

    init()
    {
        alert('hi');
        this.reload();
    }

    reload()
    {
        // go to server and get some_text
        //this.state.some_text = "hello, world";
        this.setState({some_text: "hello, world"});
    }

Would look like this:

    {
        super();
                alert('hi');
        this.state = {some_text: "hello, world"};
        this.listenables = Actions;
    }

Or trigger directly the function that grabs data from the server, there...