richb-hanover

Ticker component

May 12th, 2016
196
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component, PropTypes} from 'react';
  2. // import {bindActionCreators} from 'redux';
  3. import {connect} from 'react-redux';
  4. // import {load} from 'redux/modules/info';
  5.  
  6. const tickerMapStateToProps =
  7.           state => {
  8.             console.log('mappingTickerstatetoprops');
  9.             return {
  10.               kali: state.kali
  11.             };
  12.           };
  13. //
  14. // const tickerMapDispatchToProps =
  15. //         dispatch => { console.log(`Dispatching ${typeof dispatch}`); return ({}); };
  16.  
  17. // @connect(
  18. //   tickerMapStateToProps
  19. //   // tickerMapDispatchToProps
  20. // )(Ticker) // eslint-disable-line arrow-body-style
  21. // @connect(state => ({ time: state.kali }))
  22. export class Ticker extends Component {
  23.   static propTypes = {
  24.     kali: PropTypes.object.isRequired,
  25.   }
  26.   componentWillReceiveProps(nextProps) {
  27.     console.log(`Ticker got props: ${JSON.stringify(nextProps)}`);
  28.   }
  29.  
  30.   render() {
  31.     const { ticker, value } = this.props.kali;
  32.     console.log(`Rendering Ticker props: ${ticker}: ${value}`);
  33.     return (
  34.       <div className="ticker">
  35.         <b>THIS IS THE TICKER... {ticker}: {value} </b>
  36.       </div>
  37.     );
  38.   }
  39. }
  40.  
  41. const ConnectedTicker = connect(tickerMapStateToProps)(Ticker);
  42.  
  43. export default ConnectedTicker;
  44. ====================
  45. Reducing @@redux/INIT
  46. Reducing @@redux/PROBE_UNKNOWN_ACTION_3.k.c.d.l.q.j.v.2.t.9
  47. Reducing @@redux/INIT
  48. Reducing @@router/LOCATION_CHANGE
  49. initial store is function
  50. tickerStore is function
  51. store is: {"routing":{"locationBeforeTransitions":{"pathname":"/","search":"","hash":"","state":null,"action":"POP","key":"mkaxyd","query":{},"$searchBase":{"search":"","searchBase":""}}},"reduxAsyncConnect":{"loaded":false},"auth":{"loaded":false},"form":{},"multireducer":{"counter1":{"count":0},"counter2":{"count":0},"counter3":{"count":0}},"info":{"loaded":false},"widgets":{"loaded":false,"editing":{},"saveError":{}},"kali":{"ticker":"GOOG","value":"-"}}
  52. Reducing redux-example/LOAD
  53. Reducing redux-example/auth/LOAD
  54. Reducing redux-example/LOAD_SUCCESS
  55. Reducing redux-example/auth/LOAD_SUCCESS
  56. Reducing reduxAsyncConnect/END_GLOBAL_LOAD
  57. mappingTickerstatetoprops  <--- this is my mapStateToProps firing
  58. Rendering Ticker props: GOOG: -   <--- This is the initial render of my component
  59. setInterval tick: {"type":"kali/STOCK_UPDATE","ticker":"GOOG","value":753.8116186731495} <--- a timer goes off, fires this action
  60. Reducing kali/STOCK_UPDATE   <--- it gets reduced
  61. current state is {"ticker":"GOOG","value":"-"}  <--- current state when the action fires
  62. new state is {"ticker":"GOOG","value":753.8116186731495}  <--- new state after reducer runs
Advertisement
Add Comment
Please, Sign In to add comment