2024年Web前端最新学习使用react-redux(1)，2024前端面试宝典

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

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

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

return (

name：{name}

age：{age}

<button onClick={()=>{

dispatch({

type:“edit_name”,

name:“超级QQ”

})

}}>超级进化

)

}

export default connect((state,props)=>{

return state.data;

})(Inner)

浏览器反馈

使用react-redux的hooks

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

// src->inner.js

import React,{Fragment} from ‘react’;

import { connect } from ‘react-redux’;

function Inner(props){

console.log(props);

let {name,age,dispatch} = props

return (

name：{name}

age：{age}

<button onClick={()=>{

dispatch({

type:“edit_name”,

name:“超级QQ”

})

}}>超级进化

)

}

export default Inner

将刚才使用connect的代码改为正常的导出

然后我们需要知道hooks的三个属性

• useSelector(回调函数)：通过回调函数的返回值，来获取state

• useStore()：直接获取整个仓库

• useDispatch：获取仓库中的dispatch()方法

我们在这里实现刚才的功能是就变得简单了许多

import React, { Fragment } from ‘react’;

import { useSelector, useStore, useDispatch } from ‘react-redux’

function Inner() {

let {name,age} = useSelector((state)=>{

return state.data

});

let dispatch = useDispatch();

return (

name: {name}

age: {age}

<button onClick={()=>{

dispatch({

type:“inner_name”,

name:“暴龙兽”

})

}}>进化

)

}

export default Inner;

浏览器反馈

使用中间件thunk

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

为什么要使用中间件

---

因为我们的dispatch是同步方法，会立即执行，我们想使用异步方法时，我们就需要函数，但是dispatch内部是不接受函数的，所以这个时候我们就需要使用thunk来让dispatch来可以接受函数了

如何使用

---

1. 安装

npm i redux-thunk

2. 通过redux结构出来applyMiddleware，并且引入redux-thunk

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

import thunk from ‘redux-thunk’;

总结

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

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

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

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。