在react-redux

Question

redux进行高级搜索。我有这个搜索页面，它看起来像什么： Default Search Page

这是我的SearchAction。

SearchAction.js

export const GET_PROVIDER = 'GET_PROVIDER';
export const GET_PROVIDER_SUCCESS = 'GET_PROVIDER_SUCCESS';
export const GET_PROVIDER_FAILURE = 'GET_PROVIDER_FAILURE';
import axios from 'axios';

const GET_PROVIDER_URL = 'api/v1/provider/search';

export function searchProvider() {
    return function (dispatch) {
        dispatch({ type: GET_PROVIDER, loading: true });

        return axios.get(GET_PROVIDER_URL, {
            headers: {
                'Content-Type': 'application/json',
                'x-api-key': 'somekey',
            },
        }).then((response) => {

            if (response.status === 200) {
                dispatch(searchProviderSuccess(response.data))
            } else {
                dispatch(searchProviderFailure(response.data))
            }
        }).catch((error) => {
            dispatch(searchProviderFailure(error))
        });
    }
}

export function searchProviderSuccess(provider) {
    return {
        type: GET_PROVIDER_SUCCESS, loading: false,
        data: provider
    }
}

export function searchProviderFailure(error) {
    return {
        type: GET_PROVIDER_FAILURE, loading: false,
        error: error
    }
}

这是我的提供商列表。现在，ComponentdidMount正在使用api获取所有默认数据。

ProviderSearchList.js

import React, {Component} from 'react';
import './providerSearchList.css';
import ProviderSearchListProfile from './ProviderSearchListProfile';

class ProviderSearchList extends Component {

    constructor(props) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {
        this.props.searchProvider();

    }

    render() {

        let providers = this.props.provider.data;
        let providerList = [];
        let totalCount = '';
        let providerData = [];

        if (providers !== null && providers.providers !== null && providers.providers.length > 0) {

            totalCount = providers.providers.length + " matches found near you.";

            providerData = providers.providers;
            providerList = providerData.map((provider, key) => {
                let providerListRow =

                    <div key={key}>
                        <ProviderSearchListProfile provider={provider} showMap={this.props.showMap}/>
                    </div>;

                return providerListRow;

            })

        }

        return (

            <div className="">
                <div className="row">
                    <h3>{totalCount} </h3>
                </div>
                {providerList}
            </div>
        )
    }
}

export default ProviderSearchList

现在我有了ProviderSearchListItemContainer，在这里我使用诺言连接状态道具，并从那里获取像这样的searchProvider API。

ProviderSearchListItemContainer .js

import { connect } from 'react-redux';
import { searchProvider } from '../../actions/searchAction';
import ProviderSearchList from '../../components/ProviderSearchList/ProviderSearchList';

const mapStateToProps = (state) => {
    return {

        provider: state.ProviderReducer.provider
    }
};

const mapDispatchToProps = (dispatch) => {
    return {

        searchProvider: () => {
            dispatch(searchProvider());
        }
    }
};

const ProviderSearchListItemContainer = connect(mapStateToProps, mapDispatchToProps, null)(ProviderSearchList);

export default ProviderSearchListItemContainer

现在我有了GenderSearch过滤器。我希望通过使用像这样传递参数来使用相同的api重新加载此页面。

GenderFilterModal.js

import './filters.css';
import React, {Component} from 'react';
import { searchProvider } from '../../actions/searchAction';

class GenderFilterModal extends Component {

    constructor(props) {
        super(props);
        this.state = {
            gender: 'both',
            selected: '',
            genderBtnBg:'gender-btn-bg'
        }
    }

    handleChangeGender(e) {
        this.state.gender = e.target.value;
        this.setState({
            gender: this.state.gender
        });
    }

    submitGender(e){
// I get my gender value here like male ,female and need to connect from here and refresh the search page.
    };
    render() {
        return (
            <div className="row">

                <div id="genderFilterModal" className="modal fade" role="dialog">
                    <div className="modal-dialog genderFilter-modal-dialog modal-sm">

                        <div className="modal-content">
                            <div className="modal-header padding-10">
                                <h4 className="modal-title">Looking For</h4>
                            </div>
                            <div className="modal-body">
                                <div className="col-md-4">
                                    <button type="button"
                                            value="female"
                                            name="female"
                                            className={(this.state.gender==='female')?this.state.genderBtnBg+ ' btn btn-round btn-block':'btn btn-default btn-round btn-block'}
                                            onClick={(e) => this.handleChangeGender(e)}

                                    >
                                        Female
                                    </button>
                                </div>
                                <div className="col-md-4">
                                    <button type="button"
                                            value="male"
                                            name="male"
                                            className={(this.state.gender==='male')?this.state.genderBtnBg+ ' btn btn-round btn-block':'btn btn-default btn-round btn-block'}
                                            onClick={(e) => this.handleChangeGender(e)}

                                    >
                                        Male
                                    </button>
                                </div>
                                <div className="col-md-4">
                                    <button type="button"
                                            name="both"
                                            value="both"
                                            className={(this.state.gender==='both')?this.state.genderBtnBg+ ' btn btn-round btn-block':'btn btn-default btn-round btn-block'}
                                            onClick={(e) => this.handleChangeGender(e)}
                                    >
                                        Both
                                    </button>
                                </div>
                            </div>
                            <div className="row">
                            </div>
                            <div className="modal-footer">
                                <button onClick={(e)=>this.submitGender(e)} value={this.state.gender} type="button" className="btn btn-default" data-dismiss="modal">Apply</button>
                            </div>
                        </div>

                    </div>
                </div>


            </div>
        )

    }
}

export default GenderFilterModal;

现在，当我选择性别并按Apply（应用）按钮重新为该搜索页面加载过滤后的数据时，或者如何实现此搜索，如何实现此搜索？希望您理解我正在努力实现的目标。如果有什么请让我知道。

谢谢