react中redux是什么?

react中redux是什么?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

redux是什么?

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。

可以通过调用相应的API或者是以相应的机制改变这个容器中的数据就可以了,其他组件可以通过主动重新从容器中获取新数据来重新进行渲染。

此外这个容器还需支持发布订阅机制,即当某个数据改变了,关心这个数据的组件就产即会得到通知。

1.png

官网地址:https://github.com/reduxjs 和 https://github.com/reduxjs/react-redux

除了支持React外还支持其他的UI框架,体积小,只有2kb。当要与React一起使用的时候,可以使用react-redux插件来进一步提升我们的开发体验。

而React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据,并且向store分发actions以更新数据。

React-Redux的作用:提供了 Provider 和 connect 两个组件来建立 React组件与Store中state数据之间的连接关系.

1. Provider 组件

使用React-Redux时,首先要创建一个Provider组件 ,作为最顶层的组件将所有React组件包裹起来,从而使所有的React组件都变为Provider的后代组件,再将已经创建好的Store作为属性传递给 Provider 组件 。通过Provider组件建立起Store与React组件之间的联系。

<Provider store={store}>
     <App />   //注意Provider内部只能出现一个组件
</Provider>

2. connect 组件

Provider内的任何一个组件,并不能直接获得 State中的数据,而且也只能是有选择地访问State中的某些数据,这需要经过一个称为 "connect" 的过程。connect 的主要作用是将State中的数据转换为组件可用的数据 ,以及生成Action 的派发函数(即ActionCreator )。

在运行Redux-React时,框架内部会调用 connect 对组件进行包裹 。

function mapStateToProps(state) {  
// 该函数按需从Provider提供的state拿出此组件需要的数据并放入到它的props中,供该组件使用
  return {
    accounts: state.accounts
  };
}
function mapDispatchToProps = dispatch => {
      return {  
      //这个init会放入到props中的属性,这样组件中只需 props.init就可以执行这段逻辑
      init(initData ){
        dispatch ( action.xxx.init(initData)) ; // action.xxx.init返回的是一个action
          }
    } ;
}
export default  connect(mapStateToProps , mapDispatchToProps)(Wallet)   
//不再直接导出组件,而是通connect先进行包裹再导出

此外,redux-react会自动帮助我们做了一件非常重要的事情:以前我们需要自己基于subscribe向事件池追加方法以达到容器state数据改变,执行我们追加的方法重新渲染组件的目的,但是现在不用,redux-react帮我们做了这件事:“所有用到Redux容器state数据的组件,都会由框架向事件池中自动追加一个方法,当state数据改变后通知方法执行,把最新的state数据作为props传递给组件,组件的props改变了,组件就会重新渲染“。

更多web开发知识,请查阅 HTML中文网 !!

以上就是react中redux是什么?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏