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

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

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

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

// UI 组件
class TodolistUI extends  Component{
    render() {
        return (
            

                

                    
                    提交
                
            
        )
    }

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

const TodolistUI = (props) => {
    return(
        

            

                
                提交
            
        
    )
}

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。顶层组件通过使用连接store，使其里面所有的组件都有能力获取到store里面的数据；子组件通过connect()同store连接。
使用react-redux

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

1.安装react-redux

yarn add react-redux

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

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

ReactDOM.render(
    
        
    , 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 (
        

            

                
                submmit
            
            

                {
                    list.map((item, index) => {
                        return   
{item}
                    })
                }
            
        
    )
}

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)

（完）