Mapping Redux Store Data to FrontEnd

Question

I'm looking to map a store I have to the frontend. Please see below:

When a user searches, it makes a request and dispatches and action. E.g if I look up 'Data', I get data for all jobs with Data in the title.

https://gyazo.com/e8c086fa6c929c70863abb4551127d21

As you can see in the store, I have an action and I have in my store the following: job search, which fetches roles. I'd like to map these roles out by title to the front end section.

Please see my code below:

export function SearchBarTrialRedux(props) {

    const [isExpanded, setExpanded] = useState(false);
    const [parentRef, isClickedOutside ] = useClickOutside();
    const inputRef = useRef();
    const [searchQuery, setSearchQuery] = useState("");
    const [isLoading, setLoading] = useState(false);
    const [jobPostings, setjobPostings] = useState([]);
    const [noRoles, setNoRoles] = useState(false)


    const expandedContainer = () => {
        setExpanded(true);
    }

    const collapseContainer = () => {
        setExpanded(false);
        setSearchQuery("");
         setLoading(false);
         setNoRoles(false);
        if (inputRef.current) inputRef.current.value = "";

      };


    useEffect(()=> {
        if(isClickedOutside)
            collapseContainer();
    }, [isClickedOutside])

    const [term, setTerm] = useState("")


    const dispatch = useDispatch();


    const changeHandler = (e) => {
        e.preventDefault();
        setLoading(true)
        fetchAsyncRoles(dispatch, term);
        setLoading(false)
    }
    
    return (
    <SearchBarContainer animate = {isExpanded ? "expanded" : "collapsed"} 
                        variants={containerVariants} transition={containerTransition} ref={parentRef}>
        <SearchInputContainer>
            <SearchIconSpan>
                <SearchIcon/>
            </SearchIconSpan>
            <GeneralContainerForm onSubmit={changeHandler}>
            <SearchInput placeholder = "Search for Roles" 
                                onFocus={expandedContainer} 
                                ref={inputRef}
                                value={term}
                                onChange={(e)=> setTerm(e.target.value)}
                                />
            </GeneralContainerForm>
            <AnimatePresence>
                {isExpanded && (<CloseIconSpan  key="close-icon" 
                                inital={{opacity:0, rotate: 0}} 
                                animate={{opacity:1, rotate: 180}} 
                                exit={{opacity:0, rotate: 0}} 
                                transition={{duration: 0.2}}
                                onClick={collapseContainer}
                                onChange={(e)=> setTerm(e.target.value)}
                                >
                    <CloseIcon/>
                </CloseIconSpan>
                 )}
            </AnimatePresence>
        </SearchInputContainer>
        {isExpanded && <LineSeperator/>}
        {isExpanded && <SearchContent>
        
        {!isLoading && !noRoles && (
        <Typography color="gray" display="flex" flex="0.2" alignSelf="center" justifySelf="center">
                Start typing to search
        </Typography>
        )}
        
        {!isLoading && <>
            {jobPostings.map((roles) => (
                <JobSection
                    title={roles.title}
                />
            ))}    
        </>}
        </SearchContent>}
    </SearchBarContainer>
    )
}

What is the correct manner to do this? Is it mapstatetoprops? If so what's the proper way.

I am looking to implement further actions and the majority of the project is on the basis of this redux store concept, but I am quite new!

Answer 1

You would not use mapStateToProps nowadays except in legacy class components.

Instead, you use useSelector. So if you want to select something from state.foo.bar, you do

const bar = useSelector(state => state.foo.bar)

If you are just learning Redux I would highly recommend that you follow the official Redux tutorial as a lot of other sources out there are quite outdated. Modern Redux does not use switch..case reducers, ACTION_TYPEs, immutable reducer logic, hand-written action creators, createStore or connect/mapStateToProps any more and is about 1/4 of the code of that old style of Redux using all these concepts.