react-redux

react-redux : Official React bindings for Redux

2017-06-26 | 阅读

react-redux

react-redux使用了容器组件与展示组件相分离的开发思想。

  • 容器组件 : 容器组件是react-redux创建的包装组件,负责从Redux中获取state和派发actions
  • 展示组件 : react组件,负责从props中获取数据以展示界面。

react-reduxreact 组件之外,包装一层容器组件,通过容器组件来与Redux交互。

connect

使用connect方法来从UI组件生成容器组件:

import { connect } from 'react-redux'
const VisibleTodoList = connect()(TodoList);

connect方法接受两个参数:mapStateToPropsmapDispatchToProps,前者负责输入逻辑,即将state映射到UI组件的参数。后者负责输出逻辑,即将用户对UI组件的操作映射成Action.

外部使用的组件,是这里生成的容器组件,即VisibleTodoList.

mapStateToProps

mapStateToProps执行后返回一个对象,里面的键值对就是一个映射:

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

mapStateToProps 是一个函数,接受当前状态作为参数,返回为React组件的新属性。

getVisibleTodos是一个函数,从state算出props。mapStateToProps会订阅 Store, 每当state更新时,就会自动执行getVisibleTodos,以重新计算UI组件的props,并将props传入组件,以更新视图。

mapDispatchToProps

mapDispatchToPropsconnect函数的第二个参数,用于建立UI组件的参数到store.dispatch方法的映射,定义了哪些用户的操作应该当做Action,传给Store. 可以是一个函数,也可以是一个对象。

如果是一个函数,会得到dispatchownProps两个函数:

const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter: ownProps.filter
      });
    }
  };
}

这里有一个onClick函数,容器组件与UI组件共享这个函数,UI组件中可以直接使用这个函数来处理回调。

如果mapDispatchToProps是一个对象时,键名是UI组件的同名函数,而值为一个Action creator函数 :

const mapDispatchToProps = {
  onClick: (filter) => {
    type: 'SET_VISIBILITY_FILTER',
    filter: filter
  };
}

mapDispatchToProps 常用来发送简单的事件, 但是如果一个点击操作响应比较复杂,还是要放到UI组件中处理。 而一些响应放在UI组件中,一些响应放在容器组件中,会使代码结构显得混乱。 所以我觉得,mapDispatchToProps 的使用场景不多。

Provider组件

全局store只有一份,所以要一级级传递store会很麻烦。所以提供Provider组件,让容器组件拿到state

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp);

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

这样所有的子组件就默认可以拿到dispatch了 :

this.props.dispatch(logOut());

Providerstore放在通过react的context属性传递给所有的子组件,子组件需要声明 context type

Root.contextTypes = {
  store: React.PropTypes.object
}

然后在组件中,可以获取store :

const { store } = this.context;