Redux：为一个组件使用不同的 reducer

Question

我有一个组件 UsersList，我想将其与两个不同的 reducer 一起使用 - 一个用于列出普通用户 (state.users.x)，一个用于列出管理员 (state.adminusers.x)。两种情况下的显示相同，但状态在不同的地方并且应用不同的 api 操作（不同的端点具有不同的业务规则）。

如何编写我的组件以便它可以使用任何一个减速器？

Answer 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;

确保你的 reducer 都实现了你使用的动作函数，在本例中是 inviteUserToOrg 和 removeUserFromOrg。
创建连接到每个 reducer 的新容器组件

例如：

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 的更改将影响两个容器组件，并且每个容器组件都可以引用它自己的 reducer 状态和操作。

Redux：为一个组件使用不同的 reducer

Redux: using different reducers for a component

code-reuse

reactjs

redux