import React from “react”;
import store from ‘./redux/store’
import {incrementAction ,decrementAction,incrementActionAsync } from ‘./redux/count_action’
class Count extends React.Component{
state = {}
increment = () => {
const {value} = this.selectNumber
store.dispatch(incrementAction(value*1))
}
dencrement= () => {
const {value} = this.selectNumber
store.dispatch(decrementAction(value*1))
}
incrementIfOdd= () => {
const {value} = this.selectNumber
const count = store.getState()
if(count % 2 !== 0){
store.dispatch(incrementAction(value*1))
}
}
incrementAscyn= () => {
const {value} = this.selectNumber
store.dispatch(incrementActionAsync(value*1,500))
}
render(){
return(
当前求和{store.getState()}
<select ref={c => this.selectNumber = c}>
1 2 3
+
-
当前总数为奇数+
异步+
)
}
}
export default Demo
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初始化状态 以后组件reducer多了也可以写成对象
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.js
import React ,{Component} from ‘react’
//引入容器组件
import Count from ./container/Count
import store from ‘./redux/store’
export default class APP extends Component {
render(){
}
}
web浏览器中的javascript
- 客户端javascript
- 在html里嵌入javascript
- javascript程序的执行
- 兼容性和互用性
- 可访问性
- 安全性
- 客户端框架
- 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
window对象
-
计时器
-
浏览器定位和导航
-
浏览历史
-
浏览器和屏幕信息
-
对话框
-
错误处理
-
作为window对象属性的文档元素