redux、react-route使用总结

redux

使用原理打如下图所示：

action: 相当于圣旨，是个函数，返回对象，例如：{type：‘add’}
store：仓库，只用于存储
reducer：类似vuex里的mutation，根据圣旨（action）来执行，执行完更改仓库明细，仓库在通知页面发生变化，并且不支持异步操作

react comp：只能派发action，不能直接操作仓库，

使用：较繁琐
1、安装redux
2、在根目录下创建store.js，内容大致有

1. 引入redux内的createStore函数，参数是一个reducer，const store = createStore（counteReducer）
2. 传入store的参数reducer是一个函数，带有两个参数，state和action，action是个对象，内含有type属性，根据type执行相应的操作（可以使用switch语句进行判断），返回一个新的state
   3、在每个需要用到全局的地方都要引入store，然后通过点击等事件执行 store.deptch({type:‘add’}),这样子是更新了store，但是页面上的数据还不会更新，需要借助store的subscribe函数
   4、 在index.js中引入store，用store.subscibe(传入render的那一句)，用以监听，当数据发生改变就更新页面

react-reduce

使用react-reduce插件会方便很多

1. 在app.js中，从react-redux中引入Povide
   使用上下文传值的方式：<Provide store={store}>用到store的组件</Provide>

2. 在用到的组件中，从 react-redux中引入connect，connect是高阶组件

   使用：connect(mapStateToProps,mapDispatchToProps )(组件名)

   或者使用装饰器的写法：@connect(mapStateToProps,mapDispatchToProps )
   组件必须要用class定义，而且要放在connect的下面，然后正常导出

   mapStateToProps = state => {num:state}

   mapDispatchToProps = {
   	add: ()=>{type:'add'},
   	minus: ()=>{type:'minus'},
   } 
   

3. 之前只能使用dispatch派发对象{type：‘add’}，现在可以在组件中直接解构出需要的state或dispatch，然后直接使用
   原：onClick =（）=> {store.deptch({type:'add'})}
   现：onClick ={add}

redux-thunk

使用redux-thunk后,mapDispatchToProps 的返回值可以是一个异步函数，携带默认参数dispatch

	mapDispatchToProps = {
		add: ()=>(dispatch) => {
			// 处理异步事件
			// ......
			//完成后
			dispatch({type:'add'})
		}
	} 

在redux中可以解构出applyMiddleWare，是一个用于接收中间件的函数，有多个中间件则用逗号隔开，然后将applyMiddleWare（thunk）作为createStore的第二个参数传入

combineReducer

多个store时，用combineReducer

1、引入，从redux中结构出来combineReducer
2、使用，createStore不在只传一个reducer，而是传combineReducer（{键：值}）
例如：combineReducer({counter:counterReducer})
3、原: mapStateToProps = state => {num:state}
现：mapStateToProps = state => {num:state.counter}

react-router-dom

<BrowserRouter>
	<Route path="" component={}></Route>
</BrowserRouter>

Link:链接
exact：路由全匹配
Router：路由匹配容器
switch：从上至下选择之一匹配，最后一个可以是404页面的路由，即匹配不到

路由守卫：
包装一个组件,
比如登录的组件

function PrivateRoute({component:Comp,isLogin,...rest}) {
	 return (
	 	<Route {...rest} render={
	 		props => isLogin ? <Comp /> :
	 			<Redirect
	 				to={{pathname:'/login',redirect:props.location.pathname}}/>}
	 			/>        
	 )
}

路由组件获取参数
props含有三个参数
1、match 获取参数信息
2、history 导航指令
3、location 当前url信息
获取参数用props.match.params.参数
用props.history.goBack返回上一页

umi

与nuxt类似，可以快速开发
page存放于src目录下，用于存放页面，嵌套的页面用文件夹的方式，传参用$参数名的方式进行传参，_layout文件用于公共样式

例如：可以通过 umi g page users 创建一个user的页面，并且已经匹配好了路由

自定义路由：在根目录下创建config文件夹，内部创建config.js,此时不再使用默认的路由文件，而是使用自定义的路由文件

自定义裸游的路由守卫：

1、在要守卫的路由上加一个 Routes:["./routes/PraviteRoute.js"] //根据根目录，且后缀名不可改
PraviteRoute.js

import Redirect from "umi/redirect";

export default props => {
	if(拦截条件){
		return <Redirect to="/login" />
	}
	return (
		<div>
			{props.children}
		</div>
	)
}

dva

内部集成了redux-saga插件
要使用generator生产函数，call用于请求异步函数，put用于调用reducer

getGoods为异步获取数据，put用于更新数据