React 容器组件与UI组件

react 官方推出的 react-redux 插件对构建 react 项目中的 redux 进行了优化。

React-redux

react-redux 将组件分为 容器组件 （container component）和 UI组件（presentational component）

容器组件

• 只做结构展示和逻辑分布，不做UI渲染
• 有内部状态

UI组件

• 负责UI渲染
• 没有状态

Provider

为了让容器内可以拿到仓库中的值，一般包裹在最外层

import React from 'react'
import ReactDOM from 'react-dom'
import Todu from './ToduAPP'
import store from './store'
import {Provider } from 'react-redux'
const App = ()=>{
    return(
        <div>
            <Todu />
        </div>
    )
}

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

connect

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

import {connect} from 'react-redux'
export default connect(
    // mapStateToProps
    // state -> store.getState() 返回的值
    // ownProps -> App 组件自己本来有的 props 数据
    (state)=>{
        return{
            inputvalue:state.inputvalue,
            todus:state.todus 
        }
    },
    // mapDispatchToProps
    // dispatch -> store.dispatch 的引用
    // ownProps -> App 组件自己本来有的 props 数据
    (dispatch)=>{
        return{
            handlevalue(value){
                dispatch({
                    type:'CHANGE_CON',
                    value
                })
            },
            handledelete(index){
                dispatch({
                    type:'DELETE_LI',
                    index
                })
            },
            handeladd(){
                dispatch({
                    type:'ADD_LIST'
                })
            }
        }
    }
)(Todu)