Redux：爲組件使用不同的縮減器

Question

我有一個組件UsersList，我想用兩個不同的縮減器重用 - 一個用於列出普通用戶（state.users.x），另一個用於列出管理員（狀態。 adminusers.x）。顯示在兩種情況下都是相同的，但是狀態位於不同的地方並且應用了不同的api操作（具有不同業務規則的不同端點）。

如何編寫我的組件，以便它可以使用任一個reducer？

Answer 1

1. 正常寫入UsersList組件，但不要將它連接到redux。

例如：

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; 

確保兩個您減速器實現你用行動功能，在這種情況下inviteUserToOrg和removeUserFromOrg。

創建連接到每個減速

例如新容器組件：

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; 

和

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; 

現在改變爲您的演示組件，UsersList，將影響容器組件和每個容器組件都可以引用它自己的減速器泰特和行動。