本次我们要学习的是 Todolist 案例(路由版本)、Redux、React-Redux , React 的学习已经深入佳境,要点难点循序渐进,话不多说,上干货~(PS:文章结尾有 VIP 视频哦~)
本周课程记录(12 月 23 日)
本次课程要点
- Todolist 案例(路由版本)
- Redux
- React-Redux
课程时间轴
10:00 开始上课喽
Todolist 案例(路由版本)
create-react-app name
利用脚手架工具创建项目npm i react-router-dom
安装 React 路由组件<BrowserRoute></BrowserRoute>
在根组件外包括 BrowserRoute- 引入 NavLink 组件
- 使用 NavLink 路由进行跳转
- 创建两个组件 List(列表展示),Add(添加界面)
- 引入 Route,根据路径匹配组件渲染
- 当路径为/显示 List 组件,当路径/add 显示 Add 组件
- 当我们需要在组件中传参的话就最好使用 render,而不是 component,移入组件
- 添加数据完成后通过 history.push 方法重定向回列表页面
ES6 方法:展开运算符(…)
展开运算符,把数组展开成多个参数var arr = [1,2,3]
var arr2 = [10,...arr]
console.log(arr2)//[10,1,2,3]
11:00 休息十分钟
11:10 稍作休息之后我们继续战斗
在 React 中数据的交互是通过组件之间的通信来完成的,但是随着组件越来越多,业务逻辑越来越复杂,同时组件的嵌套也越来越复杂,数据的通信变得特别繁琐,把数据的管理和维护工作提取出来单独进行,就变得特别重要了- redux 状态管理
- https://redux.js.org/
http://www.redux.org.cn
我们把应用中需要用到的数据称为 state,随着应用的变化,数据将会变得复杂,为了能够对这种日趋复杂的数据进行有效的维护和管理,我们把 state 存储在一个 Object Tree 中,并且通过一个叫 store 的来管理这个 Object Tree
注意:Redux 是一个独立的工具,并不是必须依赖 ReactRedux 使用说明
- 安装 Redux:
npm install redux
- state:在Redux中,数据都是存放在 state 中
store:用来存放 state 的容器
- createStore:用来创建 store
- action:定义对 state 的修改操作
reducer:createStore 的参数即回调函数,用来处理数据的业务逻辑,修改和设置 state
let store = Redux.createStore(function(state,action){
return state;
})
- 调用 createStore 时,会首次执行 reducer,这时,state并没有值,我们需要通过对 state 设置初始值,并通过 reducer 的 return,把 state 存入 store 中
store 下的方法
- getState() 获取 store 中存放的 state
dispatch(obj) 修改数据
- 接受一个对象参数,该对象必须包含一个 type 属性, type 就是操作类型的说明
我们把 dispatch 传入的参数称为 action
store.dispatch ({
type:"add",
value:''
})
//操作类型 add
//通过判断操作类型,操作数据
switch(action.type){
case 'add':
return [action.newValue,...users]
break;
}
- 安装 Redux:
12:30 战场休息,补充体力
14:00 吃饱喝足,我们继续
redux 数据的管理和维护
- 这里要注意 redux 中不建议我们直接对 state 进行修改,而是每次返回一个新的对象
Object.assign() 把一个或多个源对象的可枚举属性值复制到目标对象中,返回值是我们的目标对象
Object.assign({},data,{user:[action.data,...state.users]})
Object.assign(目标对象,原有对象,对原有对象的修改)
- {} 创建一个空对象
- 后面两个参数合并,后面的合并前面的
当 state 中有多个属性时我们可以对 reducer 的操作进行分拆
function complete(complete,action){
return complete;
}
function uncomplete(uncomplete,action){
return uncomplete;
}
const reducer = function(state = {
complete:[],
uncomplete:[]
},action){
return {
complete: complete(state.complete,action)
uncomplete: uncomplete(uncomplete,action)
}
}
const store = Redux.createStore(reducer);
combineReducers 合并拆分过后的 reducer
function complete(complete = [],action){
return complete;
}
function uncomplete(uncomplete = [],action){
return uncomplete;
}
const reducer = Redux.combineReducers({
complete,
uncomplete
});
const store = Redux.createStore(reducer);
15:10 休息休息
15:15 继续
React 和 Redux 的合并使用
- 安装 React-Redux
npm i React-Redux
; - 引入 createStore,通过它创建 store
- 引入 combineReducer,用来合并函数
- 创建 store
- 将应用根组件包装进 Provider 组件中
- 过 Provider 组件的 store 属性绑定 store
- 通过 react-redux 提供的 connect 方法包装组件
export default connect(select)(App);
- select:函数,返回注入组件中的数据
- 通过 connect 的注入,在组件中即可通过组件的 props 得到 dispatch 与注入的数据了
- 安装 React-Redux
异步更新 state
通过 dispatch 更新数据,只是同步更新,但是在真正的项目中我们常常需要做的是异步更新,在 rudex 如何进行异步更新?我们就需要了解一个东西 middleware 中间层middleware 提供的是位于 action 被发起之后,到达 reducer 之前的扩展点
let dispatch = (action)=>{
console.log(1)
this.props.dispatch(action)
console.log(2)
}
看个例子:[redux-logger]
- applayMidlleware(中间件) redux 下的方法,专门管理中间件
- redux-thunk
普通的 action 是同步的,如果在 action 中需要使用异步操作,那么需要使用一个异步的 action 中间件:redux-thunk
默认情况下 action 只能为了一个 Plain Object – 纯对象,通过 thunk 可以让 action 接收一个 函数- 地址:https://github.com/gaearon/redux-thunk
- 函数 action 中的参数
- dispatch
- getState
- redux-thunk
案例:知乎日报
;
18:00 放学回家
下次课程预告
- 基于 react 开发的电商购物系统
有想一起交流的小伙伴们,可以加我们的 React 技术交流群微信群哦~打开微信扫码入群,和我们一块来学习 React;
妙味 React 微信讨论群
(PS:群人数过多,请加小美微信邀请入群)
上海《React+redux 高阶实战周末班》课程视频(连载中)
>>12-环境按照及路由拆分
>>13-路由中传递参数
>>14-pathname判断显示数据
>>15-histroy对象使用
>>16-重定向即完善整个路由版列表操作
相关推荐
>>上海《React+redux 高阶实战周末班》课程记录(一)
>>上海《React+redux 高阶实战周末班》课程记录(二)
>>上海《React+redux 高阶实战周末班》课程记录(三)
>>上海《React+redux 高阶实战周末班》课程记录(四)
广而告之:
Vue 系统修炼与精彩实战-周末班
学习路径始于“初阶” > 迈入 “晋级” > 逐渐 “深入” > 陷于 “沉迷”
- 初阶:Vue 语法从零到熟练;
- 晋级:vue-cli 脚手架创建无痛 webpack 配置目录结构;
- 深入:vue-router 单页应用的前端路由管理利器;
- 沉迷:vuex 集中式应用状态管理器;
详情了解:http://miaov.com/index.php/news/newsDetail/nid/284
妙味(2017 年 12 月底)JavaScript 实体班 - 即将开课
详情了解:http://www.miaov.com/index.php/course/coursedetail/cid/34
课程咨询:
咨询QQ:2852509866
微信咨询:miaov-class
电话咨询:010-57269690
