Redux: utilisation de différents réducteurs pour un composant

Question

J'ai un composant UsersList que je voudrais réutiliser avec deux réducteurs différents - un pour la liste des utilisateurs réguliers (state.users.x) et un pour les administrateurs listant (state. adminusers.x). L'affichage est le même dans les deux cas, mais l'état est à des endroits différents et différentes actions api s'appliquent (différents points de terminaison avec des règles métier différentes).

Comment puis-je écrire mon composant pour qu'il puisse utiliser un réducteur? Ecrivez le composant UsersList normalement, mais ne le connectez pas à redux.

Answer 1

Par exemple:

import React, { Component } from 'react'; 
import { Table } from 'react-bootstrap'; 
import UserInviteRow from 'jsx/components/Lib/Users/UserInviteRow'; 

export class UsersList extends Component { 

    render() { 
     const { inviteUserToOrg } = this.props; 

     return (
      <Table bordered hover> 
       <thead> 
        <tr> 
         <th className="width-200">First Name</th> 
         <th className="width-250">Last Name</th> 
         <th>Email</th> 
         <th className="width-150">Last Login</th> 
         <th className="width-100">&nbsp;</th> 
        </tr> 
       </thead> 
       <tbody> 
        <UserInviteRow invitefxn={ inviteUserToOrg }/> 
        { this.renderRows() } 
       </tbody> 
      </Table> 
     ); 
    } 

    renderRows() { 
     const { usersList } = this.props; 
     if(! usersList.length) { 
      return (
       <tr> 
        <td colSpan="5"> 
         <em>No users exist for this non-profit</em> 
        </td> 
       </tr> 
      ); 
     } 

     return usersList.map((user) => { 
      return (
       <tr key={user.key}> 
        <td>{user.firstName}</td> 
        <td>{user.lastName}</td> 
        <td>{user.correspondenceEmailAddress}</td> 
        <td>{ (user.lastSeen) ? formatTime(user.lastSeen) : '' }</td> 
        <td className="text-center"> 
         { this.renderRemoveButton(user) } 
        </td> 
       </tr> 
      ); 
     }); 
    } 

    renderRemoveButton(user) { 
     const { currentUser } = this.props; 
     if(currentUser.key === user.key) { 
      // users cannot remove themselves 
      return null; 
     } 

     return (
      <a className="text-danger" onClick={() => { this.removeUser(user) } }> 
       <em className="fa fa-times" /> 
      </a> 
     ); 
    } 

    removeUser(user) { 
     this.props.removeUserFromOrg(user.key); 
    } 
} 

export default UsersList; 

2. Assurez-vous que vos deux réducteurs mettre en œuvre les fonctions d'action que vous utilisez, dans ce cas inviteUserToOrg et removeUserFromOrg.

3. Créer de nouveaux composants de conteneurs connectés à chaque réducteur

Par exemple:

import { connect } from 'react-redux'; 
import { 
    inviteUserToOrg, 
    removeUserFromOrg 
} as actions from 'jsx/redux/modules/nonadminUsers'; 
import UsersList from 'jsx/components/Lib/Users/UsersList'; 

var NonadminUserList = connect(
    state => { 
    return { 
     usersList: state.users.usersList, 
    }; 
    }, 
    actions 
)(UsersList); 

export default NonadminUserList; 

et

import { connect } from 'react-redux'; 
import { 
    inviteUserToOrg, 
    removeUserFromOrg 
} as actions from 'jsx/redux/modules/adminUsers'; 
import UsersList from 'jsx/components/Lib/Users/UsersList'; 

var AdminUserList = connect(
    state => { 
     return { 
      usersList: state.adminusers.usersList, 
     }; 
    }, 
    actions 
)(UsersList); 

export default AdminUserList; 

change maintenant à votre composant de présentation, UsersList, affecteront à la fois les composants du conteneur et chaque composant du conteneur peuvent faire référence à son propre réducteur s tate et actions.