乐趣区

关于React-redux的Provider, connect的解析

react-redux 的实现原理:Redux 作为一个通用的模块,主要还是用来应用项目中 state 的变更, 通过 react-redux 做连接,可以在 React+Redux 的项目中将两者结合的更好。
React-redux 是一个轻量级的封装库,主要有两个核心方法实现:
Provider
Provider 是 react-redux 给 react 提供的一个组件,从外部封装了整个应用,并向 connect 模块传递 store
import {Provider} from ‘react-redux’;
class APP extents React.component {
render (
return (
<div className=’APP’>
<Provider store={store}>
<Header/>
</Provider>
</div>
)
);
}
export default APP;
CONNECT
connect 是 react-redux 提供的第二个核心 API,即让本组件与 store 做连接,映射到 props 当中;
1、包装原组件,将 state 和 action 通过 props 的方式传入到原组件内部
2、监听 store 变化,使其包装的原组件可相应 state 变化。

import {connect} from ‘react-redux’;
class Detail extends React.Component {

}
const mapStateToProps = (state) => ({

});
const mapDispatchToProps= (dispatch) => ({

});
export default connect(mapStateToProps, mapDispatchToProps)(Detail);
上述便是 react-redux 两个核心 API 的用法啦。如有不对,还请指正。
大家加油!!!

退出移动版