react项目中的参数解构_Web前端：React基础项目实训（中）

大家好，我来了，本期为大家带来的前端开发知识是”Web前端：React基础项目实训（中）“，有兴趣做前端的朋友，和我一起来看看吧！

主要内容

1. 城市页面及路由配置
2. 城市存储于点击切换

学习目标

第一节 城市页面

1.页面分析

城市选择页面可以分成上中下三部分，头部标签、当前城市以及热门城市。

可以分别创建组件实现

2.路由配置

本节作业：

完成城市选择页面并配置路由

第二节 创建redux，关联组件

创建redux

1.创建store，需要reducer

import 

2.创建reducers

经过分析城市选择功能只需要提供一个修改当前城市的功能

cityReducer

合并Reducer

import 

3.创建action

创建修改城市的action

export 

4.关联项目

Redux关联整个项目

import 

5.关联组件

import 

本节作业：

1.创建redux，关联组件

第三节 城市存储

1.热门城市绑定事件

<

2.写入redux

changeCity

本节作业

1. 存储城市数据

第四节 页面切换

1.城市选择页面回首页：

1.点击热门城市返回首页

这里使用编程式导航，使用react路由的history对象的push方法实现路由切换，但是在hotcity组件中访问不到history(因为这个组件不是路由关联的组件)，需要父级组件把history对象传递过来

hotcity

2.点击返回按钮返回首页

由于这个组件要被作为公共组件，使用的位置不固定，所以返回按钮的作用必须是返回上一层路径，而不是所有的都返回首页。这里使用H5新特性的history对象实现页面返回上一层

export 

2.读取redux数据

1.在home组件读取redux数据

import 

2.在city组件读取城市信息

import 

本节作业：

1. 页面切换方式有哪些？
2. 读取redux数据

本次为大家带来的前端文章内容”Web前端：React基础项目实训（中）“到此结束了，对前端开发有兴趣的朋友，关注我，更多内容等你看，我们下期再见！