用connect连接react组件和redux怎么理解

Question

这块代码看好久没懂，求解。

redux action、store、reducer差不多理解，但是不知道这块代码有什么用，为什么这么写？

原文链接 https://segmentfault.com/a/11...

Answer 1

1、关于mapStateProps()，注释上说是声明当前组件有关系的state的属性。无论是小型还是大型应用中，state数都是一颗体积庞大的树，会有各种组件的state属性组成，mapStateProps的作用就是只绑定当前组件相关的state属性，这样可以保证避免传入额外的state属性进来。

function mapStateProps(state) {
    return { text: state.text } //传入单一的属性
    //return state.login   //传入当前组件的所有属性
    //return state //传入所有的state属性
}

2、然后我们再看看dispatch，上面state的作用是从组件读取state属性，那么dispatch的作用就是组件告诉action它想要做什么事情，action就找到对应的函数去执行。

比如组件想要改变text的内容，就通过dispatch方法告诉action：喂，action，我不喜欢这句话，赶紧给我换一句显示！！

action收到之后就很听话，马上告诉reducer去更新text，更新text之后，组件就可以接收到新的state属性值了。

function mapDispatchToProps(dispatch) {
//这个函数的意思就是告诉组件要绑定的action方法，不然组件是不知道该告诉谁去执行text的更新的。
//组件 =》（dispatch：告诉）=》action 
    return {
        actions: bindActionCreators({changeText: cahngeText, buttonClick: buttonClick}, dispatch)
    }
}

3、最后一行代码：App = connect(mapStateToProps, mapDispatchToProps)(App)
上面定义的关联state和action的方法需要绑定到当前组件上面，这句代码的作用就是这个。不指定绑定的组件，万一跑到其他组件去了怎么办呢？?

4、我通常不这么写，我的写法是下面这种，意思是一样的

@connect(
    state => state.text
    dispacth => bindActionCreators({...actions}, dispatch)
)
export default class App extends Component {

}

5、so，你喜欢怎么写就怎么写。