Question: react store action listener should transition to new component on button press using react-router

Question

react store action listener should transition to new component on button press using react-router

Answers 0
Added at 2016-05-01 03:05
Tags
Question

I am new to reactjs/react-router/reflux.

I have been stuck trying to get the action listener to invoke a page transition to a new component on a button click.

https://jsfiddle.net/tven/hofjeq0u/8/

 <body>
  <div>
    <p>
      Checkout
    </p>
    <button id="button-1" onclick="placeOrder()">
      Place Order
    </button>

  </div>
  <div id="order-status-page-router">
  </div>
</body>




  var React = require('react');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = require('react-router').hashHistory;
var ReactDOM = require('react-dom');
var Reflux = require('reflux');
var cart = {
  id: '123'
};
var user = {
  name: 'first last'
};
var request = require('superagent');

var orderStatusPage = React.createClass({
  displayName: 'Order Status',
  mixins: [
    Reflux.connect(orderStore, 'order');
  ],
  render: function() {
    const orderId = '5x3423f';
    const itemName = 'Jar of Honey';
    return ( < div >
      < h1 > {
        itemName
      } < /h1> < p > {
      orderId
    } < /p>  
  );
}
});

var orderAction = Reflux.createActions([
  'placeOrder'
]);

var orderStore = Reflux.createStore({
  getInitialState: function() {
    return this.state;
  },
  init: function() {
    this.state = {};
    this.listenTo(this.orderAction.placeOrder, placeOrder);
  },
  placeOrder: function(user, cart) {
    this.completeOrder(user, cart);
  }
});

completeOrder: function(user, cart) {
  request
    .post('https://jsfiddle.net')
    .type('application/json')
    .send(user)
    .end(function(err, res) {
      if (err || !res.ok) {
        alert('Oh no! error');
      } else {
        alert('yay got ' + JSON.stringify(res.body));

      }
    })
    .finally(function() {
      this.hashHistory.push('/orderStatus');
    });
};

Wanted to see if anyone can offer clues as to what i am doing wrong.

Answers
Source Show
◀ Wstecz