要在
Redux 根组件中实现导航栏的
页面点击跳转，可以结合
React Router 和
Redux。
首先，安装
React Router 和
React Redux：
```bash
npm install
react-router-dom
react-
redux
```
然后，在根组件中使用 `BrowserRouter` 和 `Provider` 包裹应用内容：
```
javascript
import { BrowserRouter } from '
react-router-dom';
import { Provider } from '
react-
redux';
import
store from './
store';
function App() {
return (
<Provider
store={
store}>
<BrowserRouter>
{/* 应用的内容 */}
<Routes />
</BrowserRouter>
</Provider>
);
}
```
在
Redux 中，我们需要定义一个
Redux action 和 reducer，用来管理导航栏的当前选中项：
```
javascript
// actions.
js
export const SELECT_NAV_ITEM = 'SELECT_NAV_ITEM';
export function selectNavItem(item) {
return {
type: SELECT_NAV_ITEM,
payload: item,
};
}
// reducer.
js
import { SELECT_NAV_ITEM } from './actions';
const initialState = {
selectedNavItem: 'home',
};
function rootReducer(state = initialState, action) {
switch (action.type) {
case SELECT_NAV_ITEM:
return {
...state,
selectedNavItem: action.payload,
};
default:
return state;
}
}
export default rootReducer;
```
在组件中使用 `connect` 函数将
Redux store 中的 `selectedNavItem` 属性映射到组件的 props 中：
```
javascript
import { connect } from '
react-
redux';
function Navbar({ selectedNavItem, selectNavItem }) {
const handleItemClick = (item) => {
selectNavItem(item);
};
return (
<nav>
<ul>
<li className={selectedNavItem === 'home' ? 'active' : ''}>
<a href="#" onClick={() => handleItemClick('home')}>
首页
</a>
</li>
<li className={selectedNavItem === 'about' ? 'active' : ''}>
<a href="#" onClick={() => handleItemClick('about')}>
关于我们
</a>
</li>
</ul>
</nav>
);
}
const mapStateToProps = (state) => {
return {
selectedNavItem: state.selectedNavItem,
};
};
const map
DispatchToProps = {
selectNavItem,
};
export default connect(mapStateToProps, map
DispatchToProps)(Navbar);
```
最后，在 `Routes` 组件中定义路由规则，并根据 `selectedNavItem` 属性渲染对应的
页面：
```
javascript
import { Route, Switch } from '
react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
function Routes({ selectedNavItem }) {
return (
<Switch>
<Route path="/" exact>
{/* 渲染首页 */}
<Home />
</Route>
<Route path="/about">
{/* 渲染关于
页面 */}
<About />
</Route>
{/* 其他
页面 */}
</Switch>
);
}
const mapStateToProps = (state) => {
return {
selectedNavItem: state.selectedNavItem,
};
};
export default connect(mapStateToProps)(Routes);
```
这样，当用户点击导航栏中的某个项时，会触发
Redux action 更新 `selectedNavItem` 属性，导致
页面重新渲染并显示对应的
页面内容。
在Redux应用中，点击按钮未导致页面更新是因为缺少对store的订阅。通常，需要在actionCreators中引用constants来创建action，并在组件的componentDidMount生命周期方法中订阅store的变化，当state更新时通过this.setState重新渲染界面。
正常你定义action肯定要定义一些常量，这个常量是干什么用的呢？因为reducer要根据action.type来修改state并且actionCreators要根据这个来创建action，在多个地方共有某个东西最好在constant来初始化。这里主要初始化了如下四个：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
