将Redux存储数据映射到FrontEnd

Question

我在找一家我要去的商店。请见下文：

当用户搜索时，它会发出请求并分发和操作。例如，如果我查找“数据”，就会得到标题中有数据的所有作业的数据。

https://gyazo.com/e8c086fa6c929c70863abb4551127d21

正如您在商店中看到的，我有一个操作，在我的存储中有以下内容:作业搜索，它获取角色。我想按标题将这些角色映射到前端部分。

请参阅我的代码如下：

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>
    )
}

这样做的正确方式是什么？是地图道具吗？如果是这样的话，该怎么做。

我期待着实施进一步的行动和项目的大部分是基于这个退货商店的概念，但我是相当新的！

Answer 1

现在，除了在遗留类组件中使用之外，您不会使用mapStateToProps。

相反，您可以使用useSelector。因此，如果您想从state.foo.bar中选择某些内容，您可以这样做

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

如果您只是在学习Redux，我强烈建议您遵循官方Redux教程，因为很多其他来源已经非常过时了。现代的Redux不再使用switch..case还原器、ACTION_TYPE、不变的还原器逻辑、手写的动作创建者、createStore或connect/mapStateToProps，而是使用所有这些概念的旧风格的Redux代码的1/4左右。