Question

我正在开发React Web应用程序，并且遇到了困难。我正在尝试按类别过滤帖子，并且在服务器端效果很好，但是问题在于redux。这是我的redux状态=>

边栏中有类别链接，我要在用户选择类别之一后更新状态。因此，在更改category之后，我将重新渲染帖子来自更新类别的页面。

export const getPostsByCategory = (category) => (dispatch) => {

    const config = {
        withCredentials: true
    }

    axios.get(`http://127.0.0.1:8000/api/v1/?category=${category}`, config)
        .then(res => {
            dispatch({
                type: GET_POSTS,
                payload: res.data
            })
        }).catch(err => console.log(err))
}

这是侧边栏组件=>

export default function Sidebar() {

    const category = useSelector(state.category)

    onClick = () => {}

    return (
        <div className="sidebar">
            <h3>CATEGORIES</h3>
            <ul>
                <li><Link to="/fashion" className="link"><i className="icon1"><img src={icon1} alt="icon1"/></i>Fashion</Link></li>
                <li><Link to="/house" className="link"><i className="icon2"><img src={icon2} alt="icon2"/></i>House</Link></li>
                <li><Link to="/animals" className="link"><i className="icon3"><img src={icon3} alt="icon3"/></i>Animals</Link></li>
                <li><Link to="/cars" onClick={onClick} value="cars" className="link"><i className="icon4"><img src={icon4} alt="icon4"/></i>Cars</Link></li>
                <li><Link to="/sport" className="link"><i className="icon5"><img src={icon5} alt="icon5"/></i>Sport</Link></li>
                <li><Link to="/books" className="link"><i className="icon6"><img src={icon6} alt="icon6"/></i>Books</Link></li>
                <li><Link to="/movies" className="link"><i className="icon7"><img src={icon7} alt="icon7"/></i>Movies</Link></li>
                <li><Link to="/games" className="link"><i className="icon8"><img src={icon8} alt="icon8"/></i>Games</Link></li>
                <li><Link to="/landscape" className="link"><i className="icon9"><img src={icon9} alt="icon9"/></i>Landscape</Link></li>
                <li><Link to="/shuffle" className="link"><i className="icon10"><img src={icon10} alt="icon10"/></i>Shuffle</Link></li>
            </ul>
        </div>
    )

}

那么如何从该组件更新category？还是可以？

编辑：所以我想出了一个解决方案，但是它也不起作用，

actions.js =>

export const changeCategory = category => {
    return {
        type:CHANGE_CATEGORY,
        category
    }
}

reducer.js =>

case CHANGE_CATEGORY:
        return {
            ...state,
            category: category
        }

sidebar.js =>

export function Sidebar(props) {

    const onClickHandler = (e) => {props.changeCategory(e.target.value)}
    

    return (
        <div className="sidebar">
            <h3>CATEGORIES</h3>
            <ul>
                <li><Link to="/fashion" onClick={onClickHandler} className="link"><i className="icon1"><img src={icon1} alt="icon1"/></i>Fashion</Link></li>
                <li><Link to="/house" onClick={onClickHandler} className="link"><i className="icon2"><img src={icon2} alt="icon2"/></i>House</Link></li>
                <li><Link to="/animals" onClick={onClickHandler} className="link"><i className="icon3"><img src={icon3} alt="icon3"/></i>Animals</Link></li>
                <li><Link to="/cars" onClick={onClickHandler} value="cars" className="link"><i className="icon4"><img src={icon4} alt="icon4"/></i>Cars</Link></li>
                <li><Link to="/sport" onClick={onClickHandler} className="link"><i className="icon5"><img src={icon5} alt="icon5"/></i>Sport</Link></li>
                <li><Link to="/books" onClick={onClickHandler} className="link"><i className="icon6"><img src={icon6} alt="icon6"/></i>Books</Link></li>
                <li><Link to="/movies" onClick={onClickHandler} className="link"><i className="icon7"><img src={icon7} alt="icon7"/></i>Movies</Link></li>
                <li><Link to="/games" onClick={onClickHandler} className="link"><i className="icon8"><img src={icon8} alt="icon8"/></i>Games</Link></li>
                <li><Link to="/landscape" onClick={onClickHandler} className="link"><i className="icon9"><img src={icon9} alt="icon9"/></i>Landscape</Link></li>
                <li><Link to="/shuffle" onClick={onClickHandler} className="link"><i className="icon10"><img src={icon10} alt="icon10"/></i>Shuffle</Link></li>
            </ul>
        </div>
    )

}

export default connect(null, { changeCategory })(Sidebar)

如何使用功能组件更新Redux状态？

0 个答案: