react 中 redux 是什么? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
redux 是什么?
Redux 是 JavaScript 状态容器, 提供可预测化的状态管理.
可以通过调用相应的 API 或者是以相应的机制改变这个容器中的数据就可以了, 其他组件可以通过主动重新从容器中获取新数据来重新进行渲染.
此外这个容器还需支持发布订阅机制, 即当某个数据改变了, 关心这个数据的组件就产即会得到通知.
官网地址: 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 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/react/17022.html