【学习笔记 】React ⑧ react-redux的使用

UI组件、容器组件、无状态组件

在学习react-redux之前，需要了解UI组件、容器组件和无状态组件的知识。

• UI组件：可以理解为“傻瓜组件”，负责处理渲染，不含任何业务逻辑

// 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>
        )
    }

• 容器组件：可以理解为“聪明组件”，负责管业务逻辑，不负责页面渲染
• 无状态组件：是一个纯函数,相对于普通组件性能比较高

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是一个第三方模块，可以帮助我们在react中更方便的使用redux。顶层组件通过使用<Provider>连接store，使其里面所有的组件都有能力获取到store里面的数据；子组件通过connect()同store连接。
使用react-redux

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

1.安装react-redux

yarn add react-redux

2.在顶层组件使用使用<Provider>进行连接

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()接收两个参数，第一个参数mapStateProps：负责罗列store里面的数据与组件里面的数据 的映射关系； 第二个参数mapDispatchToProps：负责同store.dispatch()做关联。connect（）把这个业务逻辑和UI组件相结合，执行返回的结果是一个容器组件。

·····
//无状态组件代码
......

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)

（完）