最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

redux crateStore connect

来源：博客园


(相关资料图)

页面发布-分发dispatch(action(:object)，action已被connect(mapStateToProps, mapDispatchToProps)(App)映射到组件props )
reducer里的纯函数执行,拿到action里返回的对象数据，赋值给redux中的Store，reducer文件 与action文件都是返回store所需对象数据，两个文件对这个对象处理再次细分了，
reducer 纯粹赋值 action 对数据的来源，或对数据加以标记等
function createStore(reducer) {      var state;      var listeners = []      function getState() {          return state      }           function subscribe(listener) {          listeners.push(listener)          return function unsubscribe() {              var index = listeners.indexOf(listener)              listeners.splice(index, 1)          }      }         function dispatch(action) {          state = reducer(state, action)          listeners.forEach(listener => listener())          // listeners.forEach(listener => listener.apply(this,action)          /*           *普通观察者应该是在订阅回调函数中处理分发时传的参数，这里很巧妙的用了实例化时外部传入的reducer纯函数，          *这样 订阅的回调函数 就让reducer来操作了          *而listener订阅回调暂时是对组件的更新，subscribe是在connect连接时订阅的           */      }      dispatch({})      return { dispatch, subscribe, getState }  }
这里是connect用于理解的代码
//connect（）是一个将Redux相关的道具注入组件的函数。//您可以注入数据和回调，通过调度操作更改数据。function connect(mapStateToProps, mapDispatchToProps) {  //它让我们注入组件作为最后一步，这样人们就可以使用它作为装饰。//一般来说你不需要担心。  return function (WrappedComponent) {    //它返回一个组件    return class extends React.Component {      render() {        return (          //呈现组件          )      }            componentDidMount() {                //在componentDidMount它记得订阅商店，这样就不会错过更新        this.unsubscribe = store.subscribe(this.handleChange.bind(this))      }            componentWillUnmount() {        //稍后取消订阅        this.unsubscribe()      }          handleChange() {        //每当存储状态改变时，它就会重新呈现。        this.forceUpdate()      }    }  }}//这不是真正的实现，而是一个心智模型。//它跳过了从何处获取“存储”的问题（答案：将其放在React上下文中）//它跳过了任何性能优化（real connect（）确保我们不会徒劳地重新渲染）。//connect（）的目的是不必考虑//订阅应用商店或自己进行性能优化，以及//相反，您可以指定如何基于Redux存储状态获取道具：const ConnectedCounter = connect(  //给定Redux状态，返回道具  state => ({    value: state.counter,  }),  //给定Redux调度，返回回调道具  dispatch => ({    onIncrement() {      dispatch({ type: "INCREMENT" })    }  }))(Counter)

关键词：