将 Redux 存储数据映射到前端

Question

我正在寻找将我必须的商店映射到前端。请看下面：

当用户搜索时，它会发出请求并进行调度和操作。例如，如果我查找 'Data'，我将获得所有标题中包含数据的职位的数据。

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

正确的做法是什么？是 mapstatetoprops 吗？如果是这样，正确的方法是什么。

我正在寻求实施进一步的行动，大部分项目都是基于这个 redux store 概念，但我很新！

Answer 1

除了遗留的 class 组件，你现在不会使用 mapStateToProps。

相反，您使用 useSelector。所以如果你想 select 来自 state.foo.bar 的东西，你可以

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

如果您刚开始学习 Redux，我会高度建议您遵循 official Redux tutorial，因为那里的许多其他资源都已经过时了。现代 Redux 不再使用 switch..case reducers、ACTION_TYPEs、不可变的 reducer 逻辑、hand-written action creators、createStore 或 connect/mapStateToProps并且是使用所有这些概念的旧式 Redux 代码的大约 1/4。

将 Redux 存储数据映射到前端

Mapping Redux Store Data to FrontEnd

javascript

reactjs

redux

react-fullstack