1.redux-saga 入门
相关概念
- connect(链接) 链接仓库与视图，对应理解就是vuex的getter
import { connect } from 'umi';
const Login = (props)=>{
const { userLogin } = props;
}
export default connect({login,loading})=>{
userLogin: login,
})(Login)
connect是个科里化函数，如上面例子，可以将userLogin绑定到导出的Login模块上的props上，这样能通过结构props来获取userLogin
- models 创建模块：在models里创建js，在底层就会帮我们创建对应的模块， 模块分为以下几个部分 1：namespace 命名空间 定义了命名空间后最终底层导出就会是一个命名空间的对象，从而达到数据的私有化，避免互相干扰 2：state 状态，等同于vuex的state，但是这里的state的只读的，只能通过action来修改状态，state定义要尽量扁平化，一定不要层级太深（太深后面更新视图会很麻烦） 3：reducers：收集action,执行并更新视图(可以类比理解成vuex的mutation,但是mutation不会更新视图) 也可以将state深拷贝后再进行修改然后return(推荐工具lodash _.cloneDeep(state))
reducer:{
add(state,arg){
。。。code
return {
...state,
tabList:newList
}
}
}
必须return 一个新的对象，而且要按原来的结构依次展开（这也是为什么state扁平化的原因），因为内部判断视图更新是用的===,如果引用数据类型的指向没有发生改变，则视图不会同步更新,数组也需要复制，再修改不能直接push等操作
-effects 异步处理，底层由redux的中间件实现，写法为Generator函数，（*yield） effect参数 call 异步请求，可以是一个promise函数 put 触发reducer方法（准确说应该是创建一个dispatch Effect） race 创建多个effect..然后竞速（axios。。timeout的实现原理就是这个）谁先回来就用谁
辅助函数 takeEvery ，takeLatest
cssModel
css本身没有作用域的，为了保证不被污染，在类后面加上一串哈希码（vue的scoped也是同样的实现原理）
import styles from './index.less';
<div className={styles.title}></div>
//编译后的结果
.title_XXXXXXX{
color : #000
}
<div class="title_XXXXXXX"></div>
有时候我们不希望我们的类名被编码，我们就可以使用全局作用域:global
:global(.title){
color : #000
}
//这样正常写的样式就会被渲染且不会编译出哈希值
<div className="title"></div>
