文章目录
  1. 1. Sidebar组件
    1. 1.1. Sidebar组件功能
    2. 1.2. 添加action
    3. 1.3. 添加reducer
    4. 1.4. 创建SidebarList组件
    5. 1.5. 创建Sidebar组件
    6. 1.6. HomeContainer传入状态
  2. 2. 路由状态检测
    1. 2.1. 增加路由匹配检测
    2. 2.2. 初始化完成时调用
    3. 2.3. 监视路由变化
  3. 3. 结束语

最近又重新拾起了React框架,并配合开源模板gentelella以及Redux建立了个简单的项目。《React-Redux使用笔记》系列用于记录过程中的一些使用和解决方法。
本文记录创建Sidebar组件的过程。

Sidebar组件


上一节创建了Top组件,那是个功能和视图相对比较简单的组件。Sidebar组件下相比之下,会稍微复杂一些。

Sidebar组件功能

  • 展示菜单(SidebarList组件)
    • 最多两层菜单结
    • 外层菜单若有子菜单,则可以下拉展示;若没有,则会根据href进行跳转
  • 下拉状态管理
  • 侧边菜单状态响应(isSidebarShown)

添加action

这里我们先添加activeMenus状态相关的action和action创建函数:

1
2
3
4
5
6
7
8
9
10
11
// actions/commonActions.js
export const TOGGLE_MENU_DOWN = 'TOGGLE_MENU_DOWN'
export const TOGGLE_MENU_UP = 'TOGGLE_MENU_UP'
export function toggleMenuDown(index) {
return { type: TOGGLE_MENU_DOWN, index }
}
export function toggleMenuUp(index) {
return { type: TOGGLE_MENU_UP, index }
}

添加reducer

然后我们添加activeMenus状态相关的reducer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// store/reducers.js
import { TOGGLE_SIDEBAR, TOGGLE_MENU_DOWN, TOGGLE_MENU_UP } from '../actions/commonActions'
// 设置数组函数,增加或者删减成员
function arraySet(how, array, one) {
let index = array.indexOf(one)
let arr = array.concat()
switch (how) {
case 'add':
if (index === -1) arr.push(one)
return arr
case 'remove':
if (index > -1) arr.splice(index, 1)
return arr
default:
return arr
}
}
// 默认值为空数组
function activeMenus(menus = [], action) {
switch (action.type) {
case TOGGLE_MENU_UP:
return arraySet('remove', menus, action.index)
case TOGGLE_MENU_DOWN:
return arraySet('add', menus, action.index)
default:
return menus
}
}
// 合并多个reducers
const AppReducer = combineReducers({
isSidebarShown,
activeMenus
})

创建SidebarList组件

在routes/home/components/Sidebar文件夹下面新建SidebarList.jsx组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57