javascript - own timer component with react, reflux not working -
i try used reflux , forked example repo. full code here [ https://github.com/svenhornberg/react-starterkit ]
i want create timer component gets current time timestore, not working. devtools not show errors. must newbie mistakes, not find them.
edit1: added line in home //edit1
edit2: think mistake may in componentdidmount in home.jsx
fixed need trigger time, see answer.
store
import reflux 'reflux'; import timeactions '../actions/timeactions'; var timestore = reflux.createstore({ listenables: timeactions, init() { this.time = ''; }, oncurrenttime() { this.time = '13:47'; } });
export default timestore;
actions
import reflux 'reflux'; var timeactions = reflux.createactions([ 'currenttime' ]); export default timeactions;
component
import react 'react'; class timer extends react.component { constructor(){ super(); } render() { var time = this.props.time; return ( <div> { time } </div> ); } } timer.proptypes = { time : react.proptypes.string } export default timer;
i wanted use timer component in home.jsx
import react 'react'; import itemlist '../components/itemlist.jsx'; import itemstore '../stores/itemstore'; import itemactions '../actions/itemactions'; import timer '../components/timer.jsx'; import timestore '../stores/timestore'; import timeactions '../actions/timeactions'; class home extends react.component { constructor(props){ super(props); this.state = { items : [], loading: false, time : '' //edit1 }; } componentdidmount() { this.unsubscribe = itemstore.listen(this.onstatuschange.bind(this)); this.unsubscribe = timestore.listen(this.onstatuschange.bind(this)); itemactions.loaditems(); timeactions.currenttime(); } componentwillunmount() { this.unsubscribe(); } onstatuschange(state) { this.setstate(state); } render() { return ( <div> <h1>home area</h1> <itemlist { ...this.state } /> <timer { ...this.state } /> </div> ); } } export default home;
i fixed to: how make react.js component listen store in reflux
i have trigger time:
var timestore = reflux.createstore({ listenables: timeactions, init() { this.time = ''; }, oncurrenttime() { this.trigger({ time : '13:47' }); } });
Comments
Post a Comment