UI組件、容器組件、無狀態(tài)組件

在學(xué)習(xí)react-redux之前，需要了解UI組件、容器組件和無狀態(tài)組件的知識。

• UI組件：可以理解為“傻瓜組件”，負(fù)責(zé)處理渲染，不含任何業(yè)務(wù)邏輯

// UI 組件
class TodolistUI extends  Component{
    render() {
        return (
            <div>
                <div>
                    <Input value={this.props.inputValue}
                        placeholder={'to do info'}
                        onChange={this.props.handleInputChange}
                    />
                    <Button onClick={this.props.handleBtnClick} type="primary">提交</Button>
                </div>
            </div>
        )
    }

• 容器組件：可以理解為“聰明組件”，負(fù)責(zé)管業(yè)務(wù)邏輯，不負(fù)責(zé)頁面渲染
• 無狀態(tài)組件：是一個(gè)純函數(shù),相對于普通組件性能比較高

const TodolistUI = (props) => {
    return(
        <div>
            <div>
                <Input value={props.inputValue}
                    placeholder={'to do info'}
                    onChange={props.handleInputChange}
                />
                <Button onClick={props.handleBtnClick} type="primary">提交</Button>
            </div>
        </div>
    )
}

react-redux

React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.

????react-redux是一個(gè)第三方模塊，可以幫助我們在react中更方便的使用redux。頂層組件通過使用<Provider>連接store，使其里面所有的組件都有能力獲取到store里面的數(shù)據(jù)；子組件通過connect()同store連接。
使用react-redux

文檔地址：https://react-redux.js.org/introduction/quick-start

1.安裝react-redux

yarn add react-redux

2.在頂層組件使用使用<Provider>進(jìn)行連接

import React from 'react';
import ReactDOM from 'react-dom';
import Todolist from './Todolist';
import { Provider } from 'react-redux'
import store from './store'

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

3.子組件通過connect()同store連接

import  React from 'react'
import {connect} from 'react-redux'

const TodoList = (props) => {
    const { inputValue, list, handleClick, changeInputValue } = props
    return (
        <div>
            <div>
                <input value={inputValue} onChange={changeInputValue}/>
                <button onClick={handleClick}>submmit</button>
            </div>
            <ul>
                {
                    list.map((item, index) => {
                        return   <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
}

export default  connect(null, null)(TodoList)

4.connect()方法
connect()接收兩個(gè)參數(shù)，第一個(gè)參數(shù)mapStateProps：負(fù)責(zé)羅列store里面的數(shù)據(jù)與組件里面的數(shù)據(jù) 的映射關(guān)系； 第二個(gè)參數(shù)mapDispatchToProps：負(fù)責(zé)同store.dispatch()做關(guān)聯(lián)。connect（）把這個(gè)業(yè)務(wù)邏輯和UI組件相結(jié)合，執(zhí)行返回的結(jié)果是一個(gè)容器組件。

·····
//無狀態(tài)組件代碼
......

const mapStateProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}

const mapDispatchToProps = (dispatch) => {
    return{
        changeInputValue(e){
            const action = {
                type: 'change_input_value',
                value: e.target.value
            }
            dispatch(action)
        },
        handleClick() {
            const action = {
                type: 'add_item'
            }
            dispatch(action)
        }
    }
}

export default  connect(mapStateProps, mapDispatchToProps)(TodoList)

（完）