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 (
添加内容
<input type=“text” name=‘title’ onChange={this.onChange}
value={this.state.title}
/>
添加
)
}
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)]