react-redux

React-Redux是基于Redux的一个封装，他简化了组件和redux代码的耦合度，使页面代码看起来更加的清爽，不复杂。

React-Redux规定将组件分成两类：
第一类：UI组件
只做展示，不包含任何逻辑，不使用使用 Redux 的 API
第二类：容器组件
与UI组件相反，负责管理数据和业务逻辑，不负责 UI 的呈现带有内部状态，使用 Redux 的 API

React-Redux提供的一些常用的组件以及api

1.connect()
React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。
UI组件接收的参数就是由connect方法生成的容器组件传过去的。
完整api如下

import { connect } from 'react-redux'

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

接收两个参数，函数体里返回UI组件

export default connect(
    state=>({count:state}),
    {add,del}
)(App)

骨架
export default connect(
    state=>({UI组件中接收的数据参数名:state}),
    {UI组件中接收的逻辑方法参数名：action ,...}
)(App)

第一个参数mapStateToProps，他是一个函数。具体的语法大致如上，state就是reduce所掌管的数据。这个函数返回的对象就是UI组件所接收的数据对象。
第二个参数mapDispatchToProps是一个对象，这里面主要传的就是处理逻辑的action。

举个栗子

import React from 'react'
import {Component} from 'react'
import {add,del} from './redux/actions'  //引入两个action
import PropTypes from 'prop-types'

//引入链接函数
import {connect} from 'react-redux'

class App extends Component {
    constructor(porps) {
        super(porps);
    }
    //声明接收的属性的类型，这些东西就是connect函数生成的容器组件所传递过来的
    static propTypes = {
        count:PropTypes.number.isRequired,
        add:PropTypes.func.isRequired,
        del:PropTypes.func.isRequired,
    }

    inputChange = (e) => {
        let count = this.props.count
        count = e.target.value ? e.target.value : null
        this.props.add(count)
    }
    add = () => {
        let count = this.props.count
        count++
        this.props.add(count)
    }
    del = () => {
        let count = this.props.count
        count--
        this.props.del(count)
    }
    ifodd = () => {
        let count = this.props.count
        if (count % 2 !== 0) {
            count++
        }
        this.props.add(count)
    }
    timeadd = () => {
        let count = this.props.count
        setTimeout(() => {
            count++
            this.props.add(count)
        }, 1000)
    }

    render() {
        console.log(this.props)
        let count = this.props.count
        return (
            <div>
                <h1>click {count} time</h1>
                <input type='number' onChange={this.inputChange} value={count}/>
                <button onClick={this.add}>+</button>
                <button onClick={this.del}>-</button>
                <button onClick={this.ifodd}>increment if odd</button>
                <button onClick={this.timeadd}>increment async</button>
            </div>
        )
    }
}


//将连接函数暴露出去，连接函数接受两个参数
/**
 * connect
 * 参数1：函数，里面返回state
 * 参数2：对象，n个action
 */
export default connect(
    state=>({count:state}),
    {add,del}
)(App)

可以看到，整个页面没有一点redux代码。所有的语法和没使用redux之前一样。

connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数
一种解决方法是将state对象作为参数，传入容器组件。但是，这样做比较麻烦，尤其是容器组件可能在很深的层级，一级级将state传下去就很麻烦。

React-Redux 提供Provider组件，可以让容器组件拿到state。

import React from 'react'
import {render} from 'react-dom'
import App from './app'
import {createStore} from 'redux'
import {counter} from './redux/reducers'
import {Provider} from 'react-redux'

//生成一个store对象
const store = createStore(counter) //内部会初始化调用一次reducer函数，会得到一个初始state

/**
 * 用react-redux来管理redux版
 * 从react-redux中引入Provider组件，并且用他包裹<App>组件。将原本要传给App的store传给Provider管理。
 * 这样做之后就不需要去监听重新渲染App了
 */
function renders() {
    render(
        <Provider store={store}>
            <App/>
        </Provider>, document.getElementById('root'))
}

只需要用Provider 标签把APP包起来，然后将store传给Provider就行了。