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(){

}

}

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。