Как добавить функцию поиска с reactjs в API

Question

Я работаю над приложением реагирования, которое использует избыточность для управления состоянием В этом приложении я должен реализовать страницу поиска. Когда пользователь вводит данные в поле поиска, приложение отображает продукт, относящийся к этому текстовому вводу. У меня есть конечная точка API, как это api.XXXXXXX.com/buyer/product/filter?q=${inputValue}. Я пытался реализовать это, но я не могу отфильтровать это. Я не работал над этим раньше и не мог найти хороший учебник для этого.

Вот мой код

searchAction. js

export const searchProduct =(value) => dispatch => {
  dispatch({
    type: searchActionTypes.SEARCH_PRODUCT_LOAD
  });
  new _rest().get(`/buyer/product/filter?q=${value}`)
      .then(res => {
        console.log(res);
        dispatch({
          type: searchActionTypes.SEARCH_PRODUCT_SUCCESS,
          payload: res
        })
      }).catch(err => {
        console.log(err)
        dispatch({
          type: searchActionTypes.SEARCH_PRODUCT_ERROR,
          error: err
        })
  });
}

searchActionreducer. js

const initialState = {
    isFetching: false,
    searchData: {},
    isFetched: false,
    isError: null
}

export default (state=initialState, action) =>{
    switch (action.type) {
        case searchActionTypes.SEARCH_PRODUCT_LOAD:
            return {
                ...state,
                isFetching: true
            };
        case searchActionTypes.SEARCH_PRODUCT_SUCCESS:
            return {
                ...state,
                isFetching: false,
                searchData: action.payload.data._embedded,
                isFetched: true
            };
        case searchActionTypes.SEARCH_PRODUCT_ERROR:
            return  {
                ...state,
                isFetched: false,
            };
        default:
            return  {
                ...state
            }
    }
}

searchPage. js

class SearchPage extends  React.Component {
    state = {
        inputValue: '',
    }
    componentDidMount() {
        this.props.searchProduct('');
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('component update', prevState)
        if(this.state.inputValue !== prevState.inputValue) {
            this.props.searchProduct(this.state.inputValue);
        }
    }


    render() {
        console.log('SearchPage Result', this.props.product);
        const {product} = this.props;
        const {inputValue} =this.state;

        const updateInputValue = (e) => {
            e.preventDefault();
            this.setState({
                inputValue: e.target.value
            })
        }
        return(
            <Grid container>
            <div style={{width: '100%', display:'flex', justifyContent: 'center' }}>
                <form  noValidate autoComplete="off">
                    <TextField value={inputValue} onChange={updateInputValue} id="standard-basic" label="Search Product" />
                </form>
            </div>
                <Grid container spacing={8} style={{padding: '30px'}}>
                    {product && product.productResourceList &&
                    product.productResourceList.map((data, index) => {
                        return(
                            <Grid item xs={6}>
                            <MainCards key={data.productId} data={data} />
                            </Grid>
                        )
                    })}
                </Grid>
            </Grid>
        )
    }
}

const mapStateToProps =(state) => {
    return {

        product: state.search.searchData
    }
}
const mapDispatchToProps = {
    searchProduct,

}
export default  connect(mapStateToProps, mapDispatchToProps)(SearchPage);

Here In componentDidMount Первоначально когда компонент монтируется, я сделал отображение всего продукта. После этого в componentDidUpdate я пытаюсь получить отфильтрованные данные из API, передавая this.state.inputValue как значение q в конечной точке API api.XXXXXXX.com/buyer/product/filter?q=${inputValue}. Но компонент вообще не обновляется.