react-redux

Time: 2019-08-18

使用语法

react-redux包可以使得React和Redux一起工作。只需要按照下面的方式就可以使用react-redux:

import React from 'react' 
import { render } from 'react-dom' 
import { createStore } from 'redux' 

import { Provider } from 'react-redux'

let store = createStore(todoApp) // todoApp是reducer

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'))

这样就可以使得组件全都可以看到store了。

连接到store： connect方法

import connect from 'redux'

然后按照下面的方式使用connect：

import { connect } from 'redux'

PhotosList = someComponent
PhotosList = connect(mapStateToProps)(PhotosList)

这里mapStateToProps是一个函数：

function mapStateToProps (state) {
  return { photos: state.photos }
}

// 等价于：
const mapStateToProps = state => ({
   photos: state.photos
})

这样就把store的属性值传递到组件的props上了。

类似的，还可以定义mapDispatchToProps函数，将用于分发行为的函数也传递到组件的props上。

如何在组件上使用

直接用this.props.xxx或者无状态组件时，用props.xxx即可使用。

行为的分发过程

connect()方法的第二个参数就是负责这个的，我们现在来定义mapDispatchToProps函数。

var PhotosList = connect(mapState, mapDispatch)(PhotosList)

function mapDispatchToProps (dispatch) {
  return {
    onPublishClick: function () {
      dispatch({ type: 'PUBLISH' })
    }
  }
}
// 用箭头函数的写法是：
const mapDispatchToProps = dispatch => ({
    onPublishClick: () => {
        dispatch({ type: 'PUBLISH' })
    }
})

然后在组件上就可以使用这些传递过来的props了。

<button onClick={() => this.props.onPublishClick()}>

END.