通过用户将详细信息发送到操作的Redux流数据

我有一个 (使用Typescript)应用程序,从服务器端获取用户列表。当用户试图通过我添加的输入文本进行筛选时,当我再次尝试请求用户列表时,问题就出现了。该操作从未从用户处获取数据(用户过滤器),因此我从一开始就获取了未过滤的用户列表。

export const getUsers = (data?: UserFiltersState) => {
    const url = encodeQueryData(data)
    return {
        type: UserActionTypes.GET_USERS,
        payload: fetch('app/admin/user/search/multisearch' + url)
        .then(res => res.json())
        .then(json => json)
        .catch(ex => {
            console.log('users request error.', ex)
            return []
        })
    }
}

减速器

export const reducer: Reducer<UsersState> = (state = initialState, action) => {
    switch (action.type) {
        case UserActionTypes.GET_USERS: {
            return  {...state, loading: true, data: action.payload }
        }
        default: {
            return state
        }
    }
}
export { reducer as usersReducer }

用户列表组件

class AdminUsersPage extends Component<AllProps, AdminUserPageState> {
    constructor(props: AllProps) {
        super(props)
    }

    state: AdminUserPageState = {
        filters: {
            name: ''
        }
    }

    componentDidMount() {
        const { data } = this.props
        if (!data || data.content === undefined) {
            // Gettign the users properly.
            this.props.getUsers()
        }
    }

    renderUSers() {
        if (this.props.data.content !== undefined) {
            return this.props.data.content.map((user, index) => {
                return (
                    <tr key={index}>
                        <td>{ user.name }</td>
                    </tr>
                )
            })
        }
    }

    setFilter(e: React.ChangeEvent<HTMLInputElement>) {
        this.setState({
            filters: {
                name: e.target.value
            }
        })
        // Requesting the users again but the action never get the filters
        this.props.getUsers(this.state.filters)
    }

    render() {
        return (
            <div>
                <input type="text" onChange={ e => this.setFilter(e)  } value={ this.state.filters.name } />
                <Table>
                    <thead>
                        <tr>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.renderUSers()}
                    </tbody>
                </Table>
            </div>
        )
    }
}

const mapStateToProps = ({ users }: ApplicationState) => {
    return {
        loading: users.loading,
        data: users.data,
        errors: users.errors
    }
}

const mapDispatchToProps = (dispatch: Dispatch) => ({
    getUsers: () => dispatch(getUsers())
})

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(AdminUsersPage)

我认为我不了解react/redux工作流中的某些内容,而且我也不确定发送过滤器的正确方式是否是将其设置为状态(我想这是一个不错的做法,认为我将有多个过滤器)