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.valuereturn 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
}

React-connect用法相关推荐

常被忽略的React Children用法
前言在使用React组件时,经常用到props和Children传递数据给子组件,其中最常用的是:父组件传递元素给子组件,子组件用Children来渲染,但是Children还有一些其他的用法,下面 ...
react connect
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])连接 React 组件与 Redux store.连接操 ...
【重点】React.Component用法
组件(Components)允许您将UI拆分为独立的可重用的部分,并单独的考虑每个部分. 总览 React.Component是一个抽象基类.这意味着直接引用React.Component是毫无意义的 ...
react @connect
import React from 'react'; import { connect } from 'react-redux' import {add_A,rem_R,addAsync} from ...
24 React.createRef()用法细节分析
通过React.createRef → ref对象通过元素的ref属性可以附加到React元素上一般通过构造器中给this的属性赋值一个ref,方便整个组件使用 ref只要传递到react元素中, ...
dojo初解和dojo.connect用法（转）
最近在学习arcgis javascript api,javascript api是基于Dojo,所以先熟悉一下Dojo. DOJO常用的: 1,通过dojo.require以类似C编程中#inclu ...
React—Promise用法
Promise是什么? 从用途上来说: (1)promise主要用于异步计算. (2)可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果. (3)可以在对象之间传递和操作promise,帮助 ...
要掌握的异步connect 用法
在 socket 是阻塞模式下 connect 函数会一直到有明确的结果才会返回(或连接成功或连接失败),如果服务器地址"较远",连接速度比较慢,connect 函数在连接过程中可 ...
React ref用法
React ref 官方文档 1.介绍 Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. DOM 节点:就是平常所说的能在页面中直接获取到的原生 ...
小技巧——yarn 报错： error An unexpected error occurred: “https://registry.npmjs.org/react: connect...
原因:请求资源连接超时解决:换源 npm config set registry https://registry.npm.taobao.org

React-connect用法

1.connect方法的作用

2.connect方法的使用

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

React-connect用法相关推荐

最新文章

热门文章