zoukankan      html  css  js  c++  java
  • redux react-redux react-thunk react-saga

    1. redux是指1. 把经常用到的数据借助store保存, 2. 不同组件共享的数据借助store保存

    在项目中 一些用户信息就可以保存下来, 并通过action触发reducer,来改变store中数据, 注册了store的组件subscribestore, 有变化时会触发组件重新render

    ** 当组件subscribe到了store中的数据改变,会导致forceupdate/setState/或者props改变, 所以会触发getDeriedStateFromProps.如果使用了这个静态生命周期, 可能会有bug(不停的更新为props的值, 处理办法是使state保存一份prevProps的值备份, 用来在函数中比较)

    2. react-redux, 借助connect.js高阶组件和provider.js这个context, 来将父组件上的注册的store中的state、action进行共享。

    connect.js (晚上更新)

    export Connect=(mapState, mapDispatch)=>{

      return function(Component){

        class Connect {

         componentDidMount(){

            this.context.store.subscribe({

              forceUdpadate

            })

          }

          render(){

            

     return (

      <Component

      {....props}

      {...mapStateTOProps(...state)}

      {...mapdispatchToProps(depatch)}

      />

      );      

          } 

        }

    Connect.contextType = {store}

        return Connect;

      }

    }

    3. react-thunk

    react-thunk react-logger是借助于柯里话, 将fn([a, b, c])(props) => fn(c(b(a(props)))),这样一层层的 复杂的action转化成副作用action(是指action里面是plainobject)

    4. react-saga

    主要是借助generator, 进行监听和触发另一个generator, 直到触发到副作用的action。

    1.有rootsaga, 放入所有需要被监听的action。 takeEvery/TakeLatest

    2. worksaga, 就是takeEvery(action, fn)、takeLastest, takeevery就是(while(true){yield take(), ......yeild fn})当take(action)被执行,将执行下面的fn saga

    3. workingSaga,就是上步骤的fn saga。可以是call, 也可以是folk, 甚至可以直接commit change by put

    我的问题

    在connnect化的component里 export default connect(state=>state, action)(Counter), 在这里其实将所有的store中state, 平铺的map到了props里, action额全部map到props里

    所以可以。 <div onclick={this.props.asyncchangename()}>{this.props.bacis.usernme}</div>

  • 相关阅读:
    树莓派摄像头测试
    mqtt搭建基础教程()
    win10开始图标点击无效
    【python学习笔记:Django】7.数据库模型浅析
    【python学习笔记:Django】6.MySQL那些坑
    Ubuntu分区扩容
    Wine的中文显示与字体设置
    从有序矩阵M x N中找出是否包含某一个数,要求时间复杂度为O(M+N)
    之字形打印矩阵
    双向链表反转
  • 原文地址:https://www.cnblogs.com/connie313/p/13812886.html
Copyright © 2011-2022 走看看