React学习笔记八——Redux的使用详解

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对象属性的文档元素