reactjs - Redux 类组件和路由

Question

我最近决定升级我的一个项目并使用 redux 和 thunk 进行状态管理。不利的一面是，我是 redux 和 thunk 的新手，我所做的新更改不断破坏应用程序的结构和完整性。

我决定从小处着手，一次升级一页，但是在将组件映射到定义的路由时，我不断收到过载匹配错误。

密码策略.tsx

import React, {Component} from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'

import BreadCrumbs from '../../../components/layouts/parameters/BreadCrumbs'
import Header from '../../../components/layouts/parameters/Header'
import {securityRoutes} from '../../../routes/parameters/securityRoutes'

// Redux
import { fetchPasswordPolicies } from '../../../redux/params/security/passwordPolicyActions'
import Loading from '../../../components/layouts/parameters/Loading'


class PasswordPolicies extends Component<{
    passwordPolicies: any,
    fetchPasswordPolicies: any,
}> {
    render() {
        const authenticationRoutes = securityRoutes[0].path
        console.log(this.props)

        const pageTitle = "Password Policies"
        const showButton = false
        const breadCrumb = [
            { linkItem: true, title: "Security Settings", url: authenticationRoutes },
            { linkItem: false, title: "Password Policies" },
        ]

        const clonedFetchPasswordPolicies = this.props.fetchPasswordPolicies
        clonedFetchPasswordPolicies()

        return(
            <React.Fragment>
                <Helmet>
                    <title>{pageTitle}</title>
                </Helmet>

                <BreadCrumbs breadCrumbDetails={breadCrumb} />

                <Header title={pageTitle} showButton={showButton} />


                <div className="w-full mb-2">
                    <div className="w-9/12">
                        <p className="text-sm form-group mb-0 text-gray-500">
                            You can set up different password policies for customers. The advanced settings allow you to configure custom password policies such as password expiry time and minimum password length. The changes you make will apply to new and existing users. 
                        </p>
                    </div>
                </div>

                {
                    this.props.passwordPolicies ? (
                        <Loading />
                    ) : (
                        'Finished loading. Check console.. '
                    )
                }

                <div className="w-full">
                    <button className="bg-green-500 p-2 rounded-md text-white" onClick={() => clonedFetchPasswordPolicies()}>
                        Test - {this.props.passwordPolicies.loading ? 'true' : 'false'}
                    </button>
                </div>

            </React.Fragment>
        )
    }

    componentDidMount() {
        console.log(this.props);
        const fetchPasswordPolicies = this.props.fetchPasswordPolicies
        fetchPasswordPolicies()
    }
}

const mapStateToProps = (state: any) => {
    return {
        passwordPolicies: state.pwdPolicyState,
    }
}

const mapDispatchToProps = (dispatch: any) => {
    return {
        fetchPasswordPolicies: () => dispatch(fetchPasswordPolicies()),
    }
}

export default connect(mapStateToProps, mapDispatchToProps) (PasswordPolicies)

安全路由.tsx

export const securityRoutes = [
    
    { path: "/a/default/site-manager/security/password", component: PasswordPolicies, exact: true, activeMenu: 'pwd-policies' },
]

安全路由对象中的每个属性都有一个功能，并且由于项目的当前结构，我使用组件将定义的路由链接到特定组件（页面）。我怀疑由于我使用的是redux 连接的组件，而不是以前的普通组件，所以我遇到了重载匹配错误。

您会建议什么可用的解决方案？

标签： reactjstypescriptreact-redux