2024年Web前端最全react redux 学习，2024年最新前端面试事件流

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

console.log(‘我是count_action’,action)

switch (action.type){

case ADD_COUNT :

return state=state+100

break;

default:

return state

break;

}

}

export default counterReducer

定义第二个增加文章列表组件的action，在action文件夹下，创建postActions.js

1.这个action中定义了两个action，每个action拥有不同的type

2.第一个action用于页面初始获取文章列表数据，存在store中

3.第二个action用于请求和存储用户输入提交后产生的新数据

4.注释之后采用了es6的写法，postData=>dispatch=> 箭头函数只有一个参数，可以不写括号，箭头后是箭头函数return的值

5.因为已经安装了thunk中间件所以可以直接写异步方法

6.action函数return出的函数接收一个dispatch参数，用于分发action

7.dispatch函数中，将type和新请求到的数据分发出去，定义一个payload接收请求到的数组item

//action中做逻辑处理，定义不同逻辑的type类型，便于dispatch分发给store

import {FETCH_POSTS,NEW_POST} from ‘./actionType’

// export function fetchPosts(){

// console.log(‘触发action’)

// return function (dispatch){

// fetch(“https://jsonplaceholder.typicode.com/posts”)

// .then(res=>res.json()) //解析json

// .then(posts=>

// //通过dispatch将数据派发出去

// dispatch({

// type:FETCH_POSTS,

// payload:posts

// })

// )

// }

// }

//ES6写法

//获取数据

export const fetchPosts =()=>dispatch=>{

fetch(“https://jsonplaceholder.typicode.com/posts”)

.then(res=>res.json()) //解析json

.then(item=>

//通过dispatch将数据派发出去

dispatch({

type:FETCH_POSTS,

payload:item

})

)

}

//提交数据

//将postData参数提交

export const createPost=postData=>dispatch=>{

fetch(“https://jsonplaceholder.typicode.com/posts”,{

method:“POST”,

headers:{

“content-type”:“application/json”

},

body:JSON.stringify(postData)

})

.then(res=>res.json())

//提交之后将新数据返回，派发

.then(item=> dispatch({

type:NEW_POST,

payload:item

}))

}

第二个文章列表组件的reducer，在reducer文件夹下创建postReducer.js

1.刚才上面action的请求到的数据用payload接收了，所以在reducer里，要用action.payload取出，并传入store

2.请求到的数据用item参数接收到store

3.增加后的一条新数据用newitems参数接收到store

4.注意要写default，如果action匹配不到type或者没做任何改变，reducer则返回原state

import {FETCH_POSTS,NEW_POST} from ‘…/actions/actionType’

//定义state中的数据

const initialState={

items:[],

//注意：用户提交的数据，是个对象

// const post = {

// title:this.state.title,

// body:this.state.body

// }

newitems:{}

}

//创建reducer

//reducer中不做逻辑处理，只做传递给store的作用，根据不同的action类型，

//判断返回什么state，没有action则不做state处理

//作用：传递，不做逻辑处理，接收旧state，返回action处理后的新state

//一个reducer接收一个state，如果想管理不同的state，可以创建多个reducer

export default function postReducer (state=initialState,action){

// console.log(‘触发reducer’)

switch(action.type){

//若触发FETCH_POSTS，返回请求的state数据

case FETCH_POSTS:

return{

…state,

//将action中的新数据赋值给store的state中的数据

items:action.payload

}

case NEW_POST:

return{

…state,

//将新数据返回赋值给newitems

newitems:action.payload

}

//如果没有任何action 就return原state

default:

return state

}

}

最后，要将reducer传递给store做参数，因为store只接受一个reducer，我们有两个reducer，分别有不同的数据要处理，但是都要共享放在store中，这就要求我们将reducer整合起来，传入store

在reducer文件夹下创建index.js

1.从redux中引入combineReducers，用于整合多个reducer

2.将多个导出的reducer传入combineReducers

3.在一开始的createStore注入的reducer，一定是这个整合后的reducer，这样才能保证组件内共同使用

//将reducer集合起来的方法

import { combineReducers } from ‘redux’

import postReducer from ‘./postReducer’

import counterReducer from ‘./counterReducer’

export default combineReducers({

posts:postReducer,

counter:counterReducer

})

现在创建仓库已经完毕，开始在组件中使用了

首先要想每个组件都能用到store中的数据，可以使用Provider组件包裹根组件

入口文件index.js中

1.引入Provider组件，将组件包裹在根组件下面

Provider：它是react-redux 提供的一个 React 组件，作用是把state传给它的所有子组件，也就是说 当你用Provider传入数据后 ，下面的所有子组件都可以共享数据。

2.将定义好的store引入，并且传入Provider组件

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import App from ‘./App’

//Provider是react-redux提供的一个组件

import { Provider } from ‘react-redux’

import store from ‘./store/store’

ReactDOM.render(

,document.getElementById(‘root’));

App.js父组件中：

引入三个功能组件

import React from ‘react’

import Article from ‘./Article’

import PostForm from ‘./PostForm’

import Counter from ‘./Counter’

function App(){

return <>

</>

}

export default App

Counter.js计数组件：

1.首先想用store中的数据，必须引入connect函数

2.connect函数的写法，connect()()，接受三个参数第一个括号中是，store中的最新数据和action中的方法，

第二个括号中的参数是要使用数据的组件名

3.将mapStateToProps解析出来，取到最新的counter值，state.counter的意思是，去state中寻找名为counter的reducer

4.将此reducer下面的state数据赋值给本组件的num变量

5.在视图标签中，用this.props.num就可以使用

6.取出action中的点击增加方法，引入action中需要用到的方法，在****connect中的第二个参数解析出来

7.在组件视图方法绑定上，或者其他方法中，使用this.props.countAdd即可使用

import React, { Component } from ‘react’

import { connect } from ‘react-redux’;

import {conutAdd} from ‘…/Store3/actions/countActions’

class Counter extends Component {

render() {

console.log(‘this.props.num’,this.props.num)

return (

我是第二个reducer

{this.props.num}

点击加

)

}

}

const mapStateToProps =state=>({

num:state.counter

})

export default connect(mapStateToProps,{conutAdd})(Counter)

inout表单组件：PostForm.js

1.取到用户输入的数据后，将action方法调用时，传参给action

2.注意，定义用户数据时用的什么格式，在相对的store中定义初始化数据时就用什么格式去接收

3.只需要用方法不需要用store中的数据，connect 第一个参数可以设置为null

import React, { Component } from ‘react’

import { connect } from ‘react-redux’;

import {createPost} from ‘…/Store3/actions/postActions’

class PostForm extends Component {

constructor(props){

super(props)

this.state={

title:‘’,

body:‘’

}

this.onSubmit= this.onSubmit.bind(this)

this.onChange = this.onChange.bind(this)

}

render() {

return (

添加内容

title

<input type=“text” name=‘title’ onChange={this.onChange}

value={this.state.title}

/>

body

添加

)

}

onChange(e){

// console.log(‘e.target.name’,e.target.name)

// console.log(‘e.target.value’,e.target.value)

this.setState({

})

}

onSubmit(e){

e.preventDefault();

const post = {

title:this.state.title,

body:this.state.body

}

//调用action中的方法 需要将视图上用户输入的参数传给store

基础面试题

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

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

={this.state.body}

添加

)

}

onChange(e){

// console.log(‘e.target.name’,e.target.name)

// console.log(‘e.target.value’,e.target.value)

this.setState({

})

}

onSubmit(e){

e.preventDefault();

const post = {

title:this.state.title,

body:this.state.body

}

//调用action中的方法 需要将视图上用户输入的参数传给store

基础面试题

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

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

[外链图片转存中…(img-AhKJoyAO-1715374187675)]