React-connect用法

1.connect方法的作用

（1）组件Todolist和store做连接
（2）connect方法使得UI组件变成了容器组件（包含了业务逻辑和数据状态管理）
（3）connect使得组件和store的数据同步关联，connect： store的state数据一变，组件的state会跟着变

2.connect方法的使用

const TodoList = (props) => {...}
const mapStateToProps = (state) => {...}
const mapDispatchToProps = (dispatch) => {...}
export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

(1) mapStateToProps：store和组件props的关系

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

(2) mapDispatchToProps：props 如何对store做修改，和store.dispatch相关联

const mapDispatchToProps = (dispatch) => {
    return{
        changeInputValue(e){
            console.log(e.target.value)
            const action = getChangeInputAction(e.target.value)
            dispatch(action)
        //action被dispatch只是dispatch到store，store把action转发给reducer
        },

        handleBtnClick(){
            const action = getBtnClickAction()
            dispatch(action)
        },

        handleDelete(index){
            const action = getHandleDeleteAction(index)
            dispatch(action)
        }

    }

}

(3)在组件里使用mapStateToProps与mapDispatchToProps:
从props对象里解构赋值得到

const TodoList = (props) =>{
    const {inputValue,list, changeInputValue, handleBtnClick, handleDelete} = props
    //优化精简
    return(
        <div>
            <div>
                <input value={inputValue} onChange={changeInputValue}/>
                <button onClick={handleBtnClick}>tijiao</button>
            </div>

            <ul>
                {list.map((item,index) => {
                    return <li onClick={()=>{handleDelete(index)}} key = {index} >{item}</li>
                })}
            </ul>
        </div>
    )
}

3.一个前端业务handleBtnClick实现的流程

TodoList组件jsx代码中触发handleBtnClick会创建action，传给store，store又进一步传给reducer，reducer进行数据处理返回给store,此时state更新完成，实现handleBtnClick的列表新增功能

----actionCreators.js

import {CHANGE_INPUT_VALUE, ADD_ITEM, DELETE_ITEM} from "./actionTypes";

export const getChangeInputAction = (value) => ({
    type : CHANGE_INPUT_VALUE,
    value
})

export const getBtnClickAction = () =>({
    type: ADD_ITEM
})

export const getHandleDeleteAction = (index)=> ({
    type : DELETE_ITEM,
    index
})

------reducer.js

import {CHANGE_INPUT_VALUE, ADD_ITEM, DELETE_ITEM} from "./actionTypes";

const defaultState = {
    inputValue : '123',
    list : []
}

export default (state = defaultState, action) => {
    if(action.type === CHANGE_INPUT_VALUE){
        const newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    if(action.type === ADD_ITEM){
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if(action.type === DELETE_ITEM){
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index,1)
        return newState
    }
    return state
}