React学习笔记九——React-redux的使用详解，前端基础入门

}

}

function mapDispatchToProps(dispatch){

return{

increment:(data) => dispatch(incrementAction(data)),

decrement:(data) => dispatch(decrementAction(data)),

incrementAsync :(data,time) => dispatch(incrementActionAsync (data,time)),

}

}

//容器组件

export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

store.js（未改动）

/该文件专门用于暴露一个store对象，整个应用只有一个store对象/

import {createStore,applyMiddleware} from “redux”

//引入为Count组件服务的reducer

import reducer from “./reducers”

//引入redux-thunk中间件，用于支持异步action

import thunk from “redux-thunk”

export default createStore(reducer,applyMiddleware(thunk))

constant.js（未改动）

/* 该模块用于定义action对象中type类型的常量值,

便于管理和维护的同时，防止程序员单词写错*/

export const INCREMENT = “increment”

export const DECREMENT = “dencrement”

count_action.js （未改动）

/* 该文件专门为Coun组件生成的action对象；

action的值为对象是同步，为函数是异步*/

import {INCREMENT,DECREMENT} from ‘./constant’

import store from ‘./redux/store’

export const incrementAction = data => ({type:INCREMENT,data})

export const decrementAction = data => ({type:DECREMENT,data})

export const incrementActionAsync = (data,time) => {

//返回一个函数，函数能开启异步任务

return (dispatch) => {

setTimeout(() => {

dispatch(incrementAction(data))

},time)

}

}

count_reducer.js （未改动）

/* 1.该文件用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数

2.reducer函数会传入两个参数：分别为：之前的状态（previousState），动作对象（action）

*/

//redux初始化状态

import {INCREMENT,DECREMENT} from ‘./constant’

const initState = 0 initState = {count:0}

export defaulr function countReducer(preState=initState,action){

const {type,data} = action

switch(type){

case INCREMENT:

return preState + data

case DECREMENT:

return preState - data

default:

return preState

}

}

app.jsx（改动）

• 实际没有改动代码，只是此时的Count 组件不是UI组件，而是容器组件

import React ,{Component} from ‘react’

//引入容器组件

import Count from ./Count

import store from ‘./redux/store’

export default class APP extends Component {

render(){

}

}

index.js入口文件（改动）

• 利用react-redux中的provider方法给App下所有需要store的容器组件传入store,使容器组件与redux关联起来

• 删除之前的检测改动，react-redux自动检测刷新

import React from ‘react’

import ReactDOM from ‘react-dom’

import App from ‘./App’

import store from ‘./store’

//会给App下所有需要store的容器组件传入store

import {provider} from ‘react-redux’

ReactDOM.render(

,document.getElementById(‘root’))

/为了redux内部状态发生改变，就重新渲染组件,不用担心一个组件内部状态改变，其他组件会被渲染，因为diff算法，只会重新渲染状态更改的组件/

/*store.subscribe(() => {

ReactDOM.render(,document…)

}) */

容器组件简化版代码

========================================================================

• mapDispatchToProps作为第二个参数可以写作一个对象

• mapDispatchToProps对象的value值只需要调用action返回一个动作对象即可，react-redux会自动dispatch分发

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

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

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

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

-97tomolQ-1711003433001)]

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】