1. 如何在其他组件中使用redux呢？
根据React-Redux[上]中最后一个例子再进一步拓展，如何在子组件中使用redux呢？其实和在APP组件中基本是一模一样！
//about.js
import React from 'react';
import store from '../store/store';
import {addAction, subAction} from '../store/action';
class About extends React.PureComponent{
constructor(props){
super(props);
this.state = {
count: store.getState().count
}
}
componentDidMount() {
store.subscribe(()=>{
this.setState({
count: store.getState().count
})
})
}
componentWillUnmount() {
store.unsubscribe();
}
render(){
return (
<div>
<p>{this.state.count}</p>
<button onClick={()=>{this.btnClick()}}>递减</button>
</div>
)
}
btnClick(){
store.dispatch(subAction(1));
}
}
export default About;
// App.js
import React from 'react';
import store from './store/store';
import {addAction, subAction} from './store/action';
import About from './components/About'
class App extends React.PureComponent{
constructor(props){
super(props);
this.state = {
count: store.getState().count
}
}
componentDidMount() {
store.subscribe(()=>{
this.setState({
count: store.getState().count
})
})
}
componentWillUnmount() {
store.unsubscribe();
}
render(){
return (
<div>
<p>{this.state.count}</p>
<button onClick={()=>{this.btnClick()}}>增加</button>
<About/>
</div>
)
}
btnClick(){
store.dispatch(addAction(5));
}
}
export default App;
经过观察可以发现几个非常明显的问题：
- 当前使用Redux存在的问题
- 冗余代码太多, 每次使用都需要在构造函数中获取
每次使用都需要监听和取消监听 - 操作store的代码过于分散
- 如何解决冗余代码太多问题?
使用React-Redux,专门为react设计的redux库 - 什么是React-Redux
React-Redux是Redux官方的绑定库,能够让我们在组件中更好的读取和操作Redux保存的状态,官方地址：react-redux
可以点击链接安装react-redux
目录结构.png
//index.js
import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';
import { Provider } from 'react-redux'
import store from './store/store';
ReactDOM.render(
//在Provider中使用store属性接收store
<Provider store={store}>
<React.StrictMode>
<App/>
</React.StrictMode>
</Provider>
, document.getElementById('root'));
在需要使用store数据的文件中通过将store中存储的state和action映射到props中进行使用非常方便，看代码都少了很多呢？嘿嘿
import React from 'react';
import { connect } from 'react-redux'
class Home extends React.PureComponent{
render(){
return (
<div>
<p>{this.props.count}</p>
<button onClick={()=>{this.props.increment()}}>递增</button>
</div>
)
}
}
// 在mapStateToProps方法中告诉React-Redux, 需要将store中保存的哪些数据映射到当前组件的props上
const mapStateToProps = (state)=>{
return {
count: state.count
}
};
// 在mapDispatchToProps方法中告诉React-Redux, 需要将哪些派发的任务映射到当前组件的props上
const mapDispatchToProps = (dispatch) =>{
return {
increment(){
dispatch(addAction(1));
}
}
};
//将当前组件和映射了redux中的数据的props相关联
export default connect(mapStateToProps, mapDispatchToProps)(Home);
connect实现原理
在home.js最后一步就是用的将当前组件和映射了redux中的数据的props相关联,但是当时看的时候觉得它的写法很奇怪，就忍不住多想了一下,为什么会有两个括号连在一起呢？难道这是一种新的语法……，不会吧，真的超级奇怪
但是细想一下，如果connect(args）返回的是一个函数，那么一切都说的通了，现在让小单来一步一步思考他是怎么实现的吧！
export default connect(mapStateToProps, mapDispatchToProps)(Home);
Step 01 从connect的作用出发，当前组件和映射了redux中的数据的props相关联
connect调用时传入了两个参数，那我们就模仿这他来一顿抄抄抄，结构不出所料的话应该就是：
function connect(mapStateToProps, mapDispatchToProps){
return(
function(component){
return()
}
);
}
Step 02 高阶组件+数据映射
但是之后connect(mapStateToProps, mapDispatchToProps)(Home)返回的仍然是一个组件，这不就是高阶组件的定义吗？即：传入一个组件，返回一个组件：
并且需要把mapStateToProps和mapDispatchToProps映射到props中
function connect(mapStateToProps, mapDispatchToProps) {
return function enhanceComponent(WrappedComponent) {
class AdvComponent extends React.PureComponent{
constructor(props){
super(props);
this.state = {
storeState : {...mapStateToProps(store.getState())}
}
}
render() {
return (<WrappedComponent {...this.props}
{...mapStateToProps(store.getState())}
{...mapDispatchToProps(store.dispatch)}/>)
}
}
return AdvComponent;
}
}
Step 03 解决组件自身数据不更新问题
原因：没有进行监听，所以当数据发生变化时没有更新，但是数据本身已经变化了，只是页面不更新，可以考虑使用react生命周期来注册和取消监听
//connect.js
import ReactDOM from 'react-dom';
import React from 'react';
import store from '../store/store';
function connect(mapStateToProps, mapDispatchToProps) {
return function enhanceComponent(WrappedComponent) {
class AdvComponent extends React.PureComponent{
constructor(props){
super(props);
this.state = {
storeState : {...mapStateToProps(store.getState())}
}
}
componentDidMount() {
store.subscribe(()=>{
this.setState({
storeState: {...mapStateToProps(store.getState())}
})
})
}
componentWillUnmount() {
store.unsubscribe();
}
render() {
return (<WrappedComponent {...this.props}
{...mapStateToProps(store.getState())}
{...mapDispatchToProps(store.dispatch)}/>)
}
}
return AdvComponent;
}
}
export default connect;
此时，将app.js中的import { connect } from 'react-redux'换成引入的自己编写的connect.js也是没有问题的，说明成功啦！！
import React from 'react';
// import { connect } from 'react-redux'
import connect from '../connect/connect';
完结，睡觉！！！！
