javascript - ReactJS and Flux handleButtonClick -

i want implement button rerenders on click, button, instead whole view rerenders , think way im thinking components

i have structure this

<app>  <allemployees>    <employeebutton/>  <allemployees> </app> 

where on employee button click assign employee boss, employee owned etc. on button click send post request api , updates api. end fine, when comes front-end flux logic want make button rerendered on click.

for example have api gives me employees , stores listen change in array allemployees [ ]. if employee owned want button red, , 'remove user', if isn't blue , should 'assign user'. can't work without rerendering table in front end(which allemployees array populated table). want front end able tell if user owned employee on page load well.

my approach when action dispatched , api completed, dispatch data, , check if employees owned, checking if users in data belong current logged users "owns : []" array, if set new condition called isowned true.

then on buttonclick, sends post request, if employee @ array owned set true, set false , vice versa. added 2 variables there called "buttontext" , "buttoncolors" object.

code:

import react 'react'; import useractions 'actions/useractions'; import userstore 'stores/userstore'; export default class employeesbutton extends react.component { constructor(props: {     id: string;     buttontext: string;     buttonclass: string; }) {     super(props);     this.state = userstore.getstate();   }    componentdidmount() {     userstore.listen(this._onchange);   }    componentwillunmount() {     userstore.unlisten(this._onchange);   }    _onchange = () => {     this.setstate({       allusers: userstore.getstate().allusers,       search: userstore.getstate().allusers,       user: userstore.getstate().user,       userprofile: userstore.getstate().userprofile.profile,       userprofilefull: userstore.getstate().userprofile,       myemployees: userstore.getstate().lackeys,       myid: userstore.getstate().userprofile._id     });   }  render() {     let id = this.props.id;     let buttonclass = this.props.buttonclass;     let buttontext = this.props.buttontext;   return (     <div>       <button onclick = {function(event) { let data = id; useractions.handleemployeeupdate({data: data});}} classname ={buttonclass}>{buttontext}</button>     </div>         ); } } 

allemployees.jsx

import react 'react'; import 'scss/main.scss'; import useractions 'actions/useractions'; import userstore 'stores/userstore'; import {link} 'react-router'; import employeesbutton './aemployeesbutton'; export default class allemployees extends react.component {    constructor(props) {     super(props);     this.state = userstore.getstate();   }    componentdidmount() {     useractions.fetchuserprofile();     useractions.fetchallusers();     userstore.listen(this._onchange);   }    componentwillunmount() {     userstore.unlisten(this._onchange);   }    _onchange = () => {     this.setstate({       allusers: userstore.getstate().allusers,       search: userstore.getstate().allusers,       user: userstore.getstate().user,       userprofile: userstore.getstate().userprofile.profile,       userprofilefull: userstore.getstate().userprofile,       myemployees: userstore.getstate().lackeys,       myid: userstore.getstate().userprofile._id     });   }   return (       <div>         <main>         <h1>all employees</h1>         <div classname = "aemp">          <table classname ="table table-bordered table-hover data-toggle table-striped">         <thead>         <tr>         <th>email</th><th>first name</th> <th>last name</th> <th>dob</th> <th> department</th> <th>position</th> <th>assign employee</th>         </tr>         </thead>           <tbody>           {allusers.map((user) =>             <tr key={'user' + user._id}>               <td>{user.email}</td> <td>{user.profile.firstname}</td> <td>{user.profile.lastname}</td> <td>{user.profile.dob}</td> <td>{user.profile.department}</td> <td>{user.profile.department}</td> <td><employeesbutton buttonclass = {user.buttonclass} buttontext = {user.buttontext} id ={user._id}/></td>             </tr>           )}</tbody>           </table>           </div>         </main>       </div>     ); } } 

the store:

import immutable 'immutable'; import useractions 'actions/useractions'; import alt 'altinstance';   class userstore {  constructor() {     this.user = immutable.map({});     this.userprofile = [];     this.allusers = [];     this.lackeys = [];     // (lifecyclemethod: string, handler: function): undefined     // on: method can used listen lifecycle events. set in constructor     this.on('init', this.bootstrap);     this.on('bootstrap', this.bootstrap);      // (listenersmap: object): undefined     // bindlisteners accepts object keys correspond method in     // storemodel , values can either array of action symbols or single action symbol.     this.bindlisteners({       handleloginattempt: useractions.manuallogin,       handleloginsuccess: useractions.loginsuccess,       handlelogoutattempt: useractions.logout,       handlelogoutsuccess: useractions.logoutsuccess,       handlefetchuserprofile: useractions.fetch_user_profile,       handlefetchuserprofilecomplete: useractions.fetch_user_profile_complete,       handlefetchuserprofileerror: useractions.fetch_user_profile_error,       handleupdatesuccess: useractions.update_profile_success,       handlefetchallusers: useractions.fetch_all_users,       handlefetchalluserscomplete: useractions.fetch_all_users_complete,       handlefetchalluserserror: useractions.fetch_all_users_error,       handleemployeeupdatecomplete: useractions.handle_employee_update_complete     });   }    bootstrap() {     if (!immutable.map.ismap(this.user)) {       this.user = immutable.fromjs(this.user);     }   }    handleemployeeupdatecomplete(data) {     let uid = data.data;     (let = 0; < this.allusers.length; i++) {       if (uid == this.allusers[i]._id) {         if (this.allusers[i].isowned == false || this.allusers[i].isowned == null) {           this.allusers[i].isowned = true;           this.allusers[i].buttontext = 'remove me employee';           this.allusers[i].buttonclass = 'btn btn-danger';         } else {           this.allusers[i].isowned = false;           this.allusers[i].buttontext = 'assign me employee';           this.allusers[i].buttonclass = 'btn btn-primary';         }       }     }     this.emitchange();   }    handleemployeeupdateerror(error) {     this.error = error;   }   handlefetchuserprofile() {     this.userprofile = [];     this.lackeys = [];     this.emitchange();   }    handlefetchuserprofilecomplete(profile) {     this.userprofile = profile;     this.lackeys = profile.lackeys;     this.emitchange();   }    handlefetchuserprofileerror(error) {     this.error = error;     this.emitchange();   }    handlefetchallusers() {     this.allusers = [];     this.emitchange();   }    handlefetchalluserscomplete(users) {     (let = 0; < users.length; i++) {       users[i].isowned = false;       users[i].buttontext = 'assign me employee';       users[i].buttonclass = 'btn btn-primary';     }     this.allusers = users;    }    handlefetchalluserserror(error) {     this.error = error;   }    handleloginattempt() {     this.user = this.user.set('iswaiting', true);     this.emitchange();   }   handleupdatesuccess(data) {     if (data.firstname === '') {       data.firstname = this.userprofile.profile.firstname;     }     if (data.lastname === '') {       data.lastname = this.userprofile.profile.lastname;     }     if (data.dob === '') {       data.dob = this.userprofile.profile.dob;     }     if (data.department === '') {       data.department = this.userprofile.profile.department;     }     if (data.position === '') {       data.position = this.userprofile.profile.position;     }     this.userprofile.profile = data;   }   handleloginsuccess() {     this.user = this.user.merge({ iswaiting: false, authenticated: true });     this.emitchange();   }    handlelogoutattempt() {     this.user = this.user.set('iswaiting', true);     this.emitchange();   }    handlelogoutsuccess() {     this.user = this.user.merge({ iswaiting: false, authenticated: false });     this.emitchange();   }  }  // export our newly created store export default alt.createstore(userstore, 'userstore');