如何从另一个组件的reducer inicialstate过滤对象数组？

Question

好吧，我创建了一个带有react和redux的项目。在reducer inicialstate中，我有一个对象数组。我使用地图在屏幕上分发项目，确定。 但是我主要的疑问是我用输入创建了一个过滤器组合，但是我不知道如何按标题过滤对象，我不知道如何制作它，因为我的数组在reducer中。

减速机

    const initialState = [
    {
        id: "01",
        cardImage: "https://static3.tcdn.com.br/img/img_prod/450860/muda_da_flor_camelia_rosa_1396_1_20190611093649.jpg",
        cardName: "Camélia",
        cardText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        fullText: "Camélia Lorem ipsum dolor sit amet, consectetur adipiscing elit, ",
        categoria: "Jardim",
    },   

    {
        id: "02",
        cardImage: "http://www.mundodeflores.com/images/coreopsis.jpg?phpMyAdmin=9ea091c51a5aa3cf876fb3cf0a5f7f3d",
        cardName: "Coreópsis",
        cardText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        fullText: " Coreópsis Lorem ipsum dolor sit amet, consectetur adipiscing elit, ",
        categoria: "Jardim",
    },  
]

const cardList = (state = initialState, action) => {
switch (action.type) {
    case " ":
        return [ ...state, action.payload];
    default:
        return state;
}
};

MainCard

export default function MainCard(props) {
  const classes = useStyles();



  return (
    <CardStyled className={classes.root}>
      <CardActionArea>
        <CardMedia
          component="img"
          alt={props.cardName}
          height="140"
          image={props.cardImage}
          title={props.cardName}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {props.cardName}
          </Typography>
          <Typography variant="body2" color="blue" component="p">
            {props.cardText}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActionsStyled>
        <ButtonStyled size="small" color="primary">
          Comprar
        </ButtonStyled>
      </CardActionsStyled>
    </CardStyled>
  );
}

MainCard.propTypes = {
  cardName: PropTypes.object.isRequired,
  cardImage: PropTypes.object.isRequired,
  cardText: PropTypes.object.isRequired,
};

CardContainer

const CardContainer = (props) => {
    return (
        <MainContainer>
            {props.cardList.map(cardList => {
                return <MainCard
                            cardName={cardList.cardName} 
                            cardImage={cardList.cardImage}
                            cardText={cardList.cardText}
                />    
            })}
        </MainContainer>
    )

}
function mapStateToProps (state) {
    return{
      cardList: state.cardList,
    }
  }

过滤器，在这里，我不知道该怎么办，如何过滤化简器阵列的齿？

const FilterbyName = () => {
    return (
        <Main>
            <InputStyled></InputStyled>
        </Main>

    )
}

首页

  class Home extends React.Component {
    render() {
        return(
            <div>
                 <Header />
                <Toolbar>
                    <Menu />
                    <FilterbyName />
                </Toolbar>
                <CardContainer />

            </div>
        )
    }
}