1

我的导航栏上有一个名为 Login 的导航链接（我使用了引导导航栏）。成功登录后，我想用 react-redux（不是 redux-toolkit）的用户名替换登录。请帮助我编写减速器和动作代码。由于我是 redux 的初学者，而且我不知道如何在 reducer 和 action 文件中编码，这让我很困惑。

导航栏组件 (Navbar.js)

import React from 'react';
import { Link } from 'react-router-dom';
import { useSelector } from 'react-redux';

const Navbar = () => {
const {username} = useSelector((state) => state.user);
    return ( 
        <div>
            <nav className="navbar navbar-expand-lg">
                <div className="container-fluid">
                    <Link className="navbar-brand" to="/hommepage">Ebuy</Link>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-                        expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon">
                            <i className="fas fa-bars" style={{color: 'white', fontSize: '28px'}}></i>
                        </span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                            <li className="nav-item">
                                <Link className="nav-link" aria-current="page" to="/homepage">Home</Link>
                            </li>
                            <li className="nav-item dropdown">
                                <Link className="nav-link dropdown-toggle" to="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Select Category
                                </Link>
                                <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><Link className="dropdown-item" to="/skincare">Skincare Products</Link></li>
                                    <li><Link className="dropdown-item" to="/stationary">Stationary Products</Link></li>
                                    <li><Link className="dropdown-item" to="#">Clothing</Link></li>
                                </ul>
                            </li>
                        </ul>
                        <div className="d-flex">
                            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                                <li className='nav-item'>
                                    <Link className="nav-link" to="/">Login</Link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    );
};
 
export default Navbar;
4

2 回答 2

0

在您的导航栏组件中，您应该从 redux 获取用户名，请尝试以下操作：

const {username} = useSelector(state=> state.yourReducerName)

在此之后，在你的 jsx 中：你应该写一个这样的条件：

{username ? (<div>{username}</div>): ()<span>Login</span>}

编辑 ：

请参考这个沙盒示例并查看 reducer 和操作文件，以及导航栏组件。让我们知道这篇文章是否对您有帮助:)

于 2022-01-29T17:14:59.203 回答
0

减速器

const initialState = {
  username: null,
}

export  const userReducer(state = initialState, action) {
  switch (action.type) {
    case "CHANGE_USERNAME":
      return {
        ...state,
        username: action.payload,
      }
    default:
      return state
  }
}

行动

export const changeUserName = (name) => {
 return {
  type: "CHANGE_USERNAME",
  payload: name
 }
}

登录后调用此


const dispatch = useDispatch()

const login = () => {
 ... login logic here
 
 dispatch(changeUserName("user-1"))

}

在导航栏中

const { username } = useSelector(state=> state.user)
于 2022-01-29T17:24:18.103 回答