标签：函数 react state api connect 组件 redux store
背景：在平时中，我们直接去使用Redux，需要每个页面都需要引入store，执行getState()来获取到值，以及需要每次都进行订阅和取消订阅。维护起来不方便。
1.主要作用
react-redux配合redux使用，将redux定义的store数据注入到组件中，可以使组件轻松的拿到全局状态，方便组件间的通信。使react组价与redux数据中心（store）联系起来，调用dispatch函数修改数据状态后，触发通过subscribe注册更新视图的处理逻辑，包括需要渲染的数据和更新数据的函数。
它主要用于在入口处包裹需要用到Redux的组件。本质上是将store放入context里。
conncet方法用于将组件绑定Redux。本质上是HOC，封装掉了每个组件都要写的板式代码。
- createStore函数
用来生成store, 使用方法: const store = createStore(reducer, initialState, enhancer)。
- bindActionCreators 将 action 包装成直接可被调用的函数，用户感知不到dispatch的存在
- combineReducers
一个复杂的应用往往state 比较庞大，导致 Reducer 函数也比较庞大，因此如果能把reducer拆分成一个个独立的子Reducer, 最后再把他们合成一个大的reducer，处理起来就比较方便。而combineReducers就是做这件事的，该函数根据state的key去执行响应的子Reducer，并将结果合并到最终的state对象里。
react-redux用来将redux创建的store映射到组件内部，简化redux操作，react-redux 提供了两个重要的函数，Provider 和 connect。
Provider组件 Provider其实是一个React 组件，其原理是通过React组件的context 属性实现store 的传递， 进而拿到整个应用的state。 connect 函数 connect函数是把 redux 的 dispatch 和 state 映射为 react 组件的 props中，将页面里的组件与应用的状态state真正连接起来。 mapStateToProps()、mapDispatchToProps()可以建立一个从（外部的）state，store.dispatch对象到（UI 组件的）props对象的映射关系
2.常用API
- Provider组件：提供共享的store，HOC（高阶组件），Provider 返回一个HOC（高阶组件）的函数：conncet。
- connect方法：从store中获取数据和方法，注入组件，返回包含数据和方法的高阶组件。接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。 mapDispatchToProps() connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。
- useSelector方法：与connect获取数据的作用一样，即获取组件所需的store中的数据
- useDispatch方法：与connect获取数据更新方法的作用一样，即获取dispatch方法，用于发送action来更新store中的数据。
- applyMiddleware applyMiddleware(…middlewares) 引入中间件，比如我们经常使用的用于处理异步action的redux-thunk 中间件。实际上，中间件是一个函数，对store.dispatch函数进行了改造，在发出action和执行reducer之间，增加了一些其他的功能。
- compose compose是一个返回依次执行参数里面的方法的函数， 其内部是通过Array.prototype.reduceRight 函数实现的，一般redux项目使用多个中间件时会用到。
- mapStateToProps() mapStateToProps是一个函数，它接受state作为参数，返回一个对象。这个对象有一个todos属性，代表 UI 组件的同名参数，后面的getVisibleTodos也是一个函数，可以从state算出 todos 的值。
3.主要作用
- Provider ，让通过props传递进来的store对象挂载到context环境上，并且渲染props.children；
- 以便在
connect(mapStateToProps, mapDispatchToProps )返回的HOC中，通过context可以获取到store对象 - 再通过store.subscribe函数，注册组件更新的逻辑
- 以便在
- conncet，输入两个函数作为参数：mapStateToProps、mapDispatchToProps，返回一个HOC；
- 在HOC中通过this.context获取到Provider中往下传递的store对象；
- 在store.subscribe中注册视图更新逻辑；
- 通过store.getState()作为mapStateToProps函数的参数，store.dispatch作为mapDispatchToProps的参数，生成两个对象；
- 将产生的两个对象，通过props传递给真正的视图组件使用；
标签：函数,react,state,api,connect,组件,redux,store 来源： https://blog.csdn.net/weixin_40599109/article/details/114594451
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。