React尚硅谷103-114(react-redux,优化redux,devtools,纯函数)

容器组件简写：react-redux底层做dispatch处理，传mapDispatchToProps对象

import CountUI from ‘…/…/components/Count’

import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from ‘…/…/redux/count_action’

import { connect } from ‘react-redux’

// const mapStateToProps=state=> ({count: state })

// function mapDispatchToProps(dispatch) {

// return {

// jia: number => dispatch(createIncrementAction(number)),

// jian: number => dispatch(createDecrementAction(number)),

// jiaAsync: (number, time) => dispatch(createIncrementAsyncAction(number, time)),

// }

// }

export default connect(

state => ({ count: state }),

{

jia: createIncrementAction,

jian: createDecrementAction,

jiaAsync: createIncrementAsyncAction

}

)(CountUI)

index.js简化

//不引入store

//store.subscribe注释

2.使用Provider的时候

import store from ‘./redux/store’

import {Provider的时候} from ‘react-redux’

ReactDOM.render(

,

document.getElementById(‘root’)

);

容器组件和UI组件组成一个文件，container

手写一个container练习连接redux

---

import React, { Component } from ‘react’

import { createIncrementAction } from ‘…/…/redux/count_action’

import { connect } from ‘react-redux’

class Count extends Component {

add = () => {

this.props.jia(1)

}

render() {

return (

点我加一

数值：{this.props.he}

)

}

}

export default connect(

state => ({ he: state })

,

{

jia: createIncrementAction

}

)(Count)

多个reduces的时候，使用combineReducers

---

//store.js:

import {createStore,applyMiddleware,combineReducers} from ‘redux’

import countReducer from ‘./reducers/count.js’

import personReducer from ‘./reducers/person.js’

//引入redux-thunk,可以dispatch函数

import thunk from ‘redux-thunk’

// 总的reducer

const allReducer = combineReducers({

he:countReducer,

rens:personReducer

})

export default createStore(allReducer,applyMiddleware(thunk))

//Person.jsx组件：

import React, { Component } from ‘react’

import {nanoid} from ‘nanoid’

import {connect} from ‘react-redux’

import {addCreateAction} from ‘…/…/redux/actions/person’

class Person extends Component {

addPerson = () => {

const name = this.nameNode.value;

const age = this.ageNode.value;

const personObj = {id:nanoid(),name,age}

this.props.add(personObj)

}

render() {

console.log(this.props)

return (

---

我是person组件

<input ref={c=>this.nameNode=c} type=“text” placeholder=“输入名字”/>

<input ref={c=>this.ageNode=c} type=“text” placeholder=“输入年龄”/>

添加

{/*

• {this.props.person.name}–年龄1
• */}

  {

  this.props.person.map(ele=>{

  return (

• {ele.name}--{ele.age}

• )

  })

  }

• {this.props.count}

• )

  }

  }

  export default Person = connect(

  // 因为是总状态

  state=>({person:state.rens,

  count:state.he})

  ,

  {add:addCreateAction}

  )(Person)

  reducer.js中需要纯函数

  ---

  1. 同样的输入，必得到同样的输出（返回）

  2. 不得改写参数数据

  3. 不会产生副作用，如网络请求，输入输出设备

  4. 不能Data.now（）或者Math.random()

  redux开发者工具

  ---

  1. yarn add redux-devtools-extension

  2. store中配置

  import {composeWithDevTools} from ‘redux-devtools-extension’

  const store = creteStore(allReducer,composeWithDevTools(applyMiddleWare(thunk)))

  把汇总reducers放在reducers文件夹暴露给store

  ---

  // 汇总reducer，不要在store中引入

  import {combineReducers} from ‘redux’

  import countReducer from ‘./count.js’

  import personReducer from ‘./person.js’

  export default combineReducers({

  he:countReducer,

  rens:personReducer

  })

  //store.js

  import {createStore,applyMiddleware} from ‘redux’

  import allReducer from ‘./reducers/index.js’

  //引入redux-thunk,可以dispatch函数

  import thunk from ‘redux-thunk’

  import {composeWithDevTools} from ‘redux-devtools-extension’

  export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

  多触发对象简写方式

  ---

  

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  …(img-e58FphjE-1715587010270)]

  [外链图片转存中…(img-4vrgw3DG-1715587010270)]

  [外链图片转存中…(img-vH3eDjY4-1715587010270)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！