React-Redux

[WangShuXian6]

connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。

import { connect } from 'react-redux'

const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList)

>mapStateToProps是一个函数。它的作用就是像它的名字那样，建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系
>mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。
```javascript
const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

mapStateToProps的第一个参数总是state对象，还可以使用第二个参数，代表容器组件的props对象

// 容器组件的代码
//    <FilterLink filter="SHOW_ALL">
//      All
//    </FilterLink>

const mapStateToProps = (state, ownProps) => { return { active: ownProps.filter === state.visibilityFilter } }

[WangShuXian6]

计数器示例-版本1 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {store} from './store'
import {Provider} from 'react-redux'
import Counter2 from './components/counter2'

ReactDOM.render(

, document.getElementById('root') ); registerServiceWorker(); ``` >store.js ```javascript import {createStore} from 'redux' import counter2 from './reducers/counter2' const store = createStore(counter2) export {store} ``` >components/counter2.js ```javascript import React, {Component} from 'react' import {increaseAction} from "../actions/increase"; import PropTypes from 'prop-types' import {connect} from 'react-redux' class Counter2 extends Component { render() { const {value, onIncreaseClick} = this.props return (

{value} Increase

) } } Counter2.propTypes = { value: PropTypes.number.isRequired, onIncreaseClick: PropTypes.func.isRequired } function mapStateToProps(state) { return { value: state.count } } function mapDispatchToProps(disptch) { return { onIncreaseClick: () => { disptch(increaseAction()) } } } export default connect(mapStateToProps, mapDispatchToProps)(Counter2) ``` >actions/increase.js ```javascript export function increase() { return { type: 'increase' } } ``` >reducers/counter2.js ```javascript export default (state = {count: 0}, action) => { const count = state.count switch (action.type) { case 'increase': return {count: count + 1} default: return state } } ```

[WangShuXian6]

计数器示例-版本2 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {store} from './store'
import {Provider} from 'react-redux'
import Counter2 from './components/counter2'

ReactDOM.render(

, document.getElementById('root') ); registerServiceWorker(); ``` >store.js ```javascript import {createStore} from 'redux' import counter2 from './reducers/counter2' const store = createStore(counter2) export {store} ``` >components/counter2.js ```javascript import React, {Component} from 'react' import * as actions from "../actions/increase"; import PropTypes from 'prop-types' import {connect} from 'react-redux' import {bindActionCreators} from 'redux' class Counter2 extends Component { handleClick() { this.props.increase() } render() { const {value} = this.props return (

{value} Increase

) } } Counter2.propTypes = { value: PropTypes.number.isRequired, onIncreaseClick: PropTypes.func.isRequired } function mapStateToProps(state) { return { value: state.count } } let mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch) export default connect(mapStateToProps, mapDispatchToProps)(Counter2) ``` >actions/increase.js ```javascript export function increase() { return { type: 'increase' } } ``` >reducers/counter2.js ```javascript export default (state = {count: 0}, action) => { const count = state.count switch (action.type) { case 'increase': return {count: count + 1} default: return state } } ```