设计app/seo引擎优化外包
redux
- 一、redux理解
- 1、学习文档
- 2、redux是什么
- 3、什么情况下需要使用redux
- 4、redux工作流程
- 二、redux的三个核心概念
- 1、action
- 2、reducer
- 3、 store
- 三、引出Redux编程的案例
- 1、使用纯react去编写
- 2、精简版Redux
- 3、完整版Redux
- 4、异步Action版
- 四、redux的核心API总结
- 五、react-redux的基本使用（官方出的插件库，和Redux并不是一个东西，Redux是第三方的）
- 1、理解
- 2、react-Redux将所有组件分成两大类
- 3、连接容器组件与UI组件
- 4、react-redux的基本使用
- 5、上面的示例代码优化
- 6、上面的示例实现数据共享
- 六、纯函数和高阶函数
- 1、纯函数
- 2、 高阶函数
- 七、使用redux调试工具
一、redux理解
1、学习文档
- 英文文档: https://redux.js.org/
- 中文文档: http://www.redux.org.cn/
- Github: https://github.com/reactjs/redux
2、redux是什么
- redux是一个专门用于做状态管理的JS库(不是react插件库)。
- 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
- 作用: 集中式管理react应用中多个组件共享的状态。
3、什么情况下需要使用redux
- 某个组件的状态，需要让其他组件可以随时拿到（共享）。
- 一个组件需要改变另一个组件的状态（通信）。
- 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。
4、redux工作流程
二、redux的三个核心概念
1、action
- 动作的对象
- 包含2个属性
type：标识属性, 值为字符串, 唯一, 必要属性
data：数据属性, 值类型任意, 可选属性 - 例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }
2、reducer
- 用于初始化状态、加工状态。
- 加工时，根据旧的state和action， 产生新的state的纯函数。
3、 store
- 将state、action、reducer联系在一起的对象
- 如何得到此对象?
- import {createStore} from ‘redux’
- import reducer from ‘./reducers’
- const store = createStore(reducer)
- 此对象的功能?
- getState(): 得到state
- dispatch(action): 分发action, 触发reducer调用, 产生新的state
- subscribe(listener): 注册监听, 当产生了新的state时, 自动调用
三、引出Redux编程的案例
效果图
1、使用纯react去编写
目录结构
index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'ReactDOM.render(<App />, document.getElementById('root'))
App.jsx
import React, { Component } from 'react'
import Count from './components/Count/Count'
export default class App extends Component {render () {return (<div><Count /></div>)}
}components下的Count下的Count.jsx
import React, { Component } from 'react'export default class Count extends Component {state = {count:0}//加法increment = ()=>{const {value} = this.selectNumberconst {count} = this.statethis.setState({count:count+value*1})}//减法decrement = ()=>{const {value} = this.selectNumberconst {count} = this.statethis.setState({count:count-value*1})}//奇数再加incrementIfOdd = ()=>{const {value} = this.selectNumberconst {count} = this.stateif(count % 2 !== 0){this.setState({count:count+value*1})}}//异步加incrementAsync = ()=>{const {value} = this.selectNumberconst {count} = this.statesetTimeout(()=>{this.setState({count:count+value*1})},500)}render() {return (<div><h1>当前求和为：{this.state.count}</h1><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div>)}
}2、精简版Redux
目录结构
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'ReactDOM.render(<App />, document.getElementById('root'))store.subscribe(() => { //目的是一旦有状态发生改变，就让render执行一次ReactDOM.render(<App />, document.getElementById('root'))
})
App.jsx
import React, { Component } from 'react'
import Count from './components/Count'export default class App extends Component {render() {return (<div><Count/></div>)}
}components下的Count下的indext.jsx
import React, { Component } from 'react'
//引入store，用于获取redux中保存状态
import store from '../../redux/store'export default class Count extends Component {state = {carName:'奔驰c63'}/* componentDidMount(){//检测redux中状态的变化，只要变化，就调用renderstore.subscribe(()=>{this.setState({})})} *///加法increment = ()=>{const {value} = this.selectNumberstore.dispatch({type:'increment',data:value*1})}//减法decrement = ()=>{const {value} = this.selectNumberstore.dispatch({type:'decrement',data:value*1})}//奇数再加incrementIfOdd = ()=>{const {value} = this.selectNumberconst count = store.getState()if(count % 2 !== 0){store.dispatch({type:'increment',data:value*1})}}//异步加incrementAsync = ()=>{const {value} = this.selectNumbersetTimeout(()=>{store.dispatch({type:'increment',data:value*1})},500)}render() {return (<div><h1>当前求和为：{store.getState()}</h1><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div>)}
}redux下的count_reducer.js
/* 1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){// console.log(preState);//从action对象中获取：type、dataconst {type,data} = action//根据type决定如何加工数据switch (type) {case 'increment': //如果是加return preState + datacase 'decrement': //若果是减return preState - datadefault:return preState}
}
redux下的store.js
/* 该文件专门用于暴露一个store对象，整个应用只有一个store对象
*///引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//暴露store
export default createStore(countReducer)
总结
(1).去除Count组件自身的状态
(2).src下建立:
-redux
-store.js
-count_reducer.js
(3).store.js：
1).引入redux中的createStore函数，创建一个store
2).createStore调用时要传入一个为其服务的reducer
3).记得暴露store对象
(4).count_reducer.js：
1).reducer的本质是一个函数，接收：preState,action，返回加工后的状态
2).reducer有两个作用：初始化状态，加工状态
3).reducer被第一次调用时，是store自动触发的，
传递的preState是undefined,
传递的action是:{type:’@@REDUX/INIT_a.2.b.4}
(5).在index.js中监测store中状态的改变，一旦发生改变重新渲染<App/>
备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。
3、完整版Redux
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'ReactDOM.render(<App/>,document.getElementById('root'))store.subscribe(()=>{ReactDOM.render(<App/>,document.getElementById('root'))
})
App.jsx
import React, { Component } from 'react'
import Count from './components/Count'export default class App extends Component {render() {return (<div><Count/></div>)}
}components下的Count下的index.jsx
import React, { Component } from 'react'
//引入store，用于获取redux中保存状态
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import {createIncrementAction,createDecrementAction} from '../../redux/count_action'export default class Count extends Component {state = {carName:'奔驰c63'}/* componentDidMount(){//检测redux中状态的变化，只要变化，就调用renderstore.subscribe(()=>{this.setState({})})} *///加法increment = ()=>{const {value} = this.selectNumberstore.dispatch(createIncrementAction(value*1))}//减法decrement = ()=>{const {value} = this.selectNumberstore.dispatch(createDecrementAction(value*1))}//奇数再加incrementIfOdd = ()=>{const {value} = this.selectNumberconst count = store.getState()if(count % 2 !== 0){store.dispatch(createIncrementAction(value*1))}}//异步加incrementAsync = ()=>{const {value} = this.selectNumbersetTimeout(()=>{store.dispatch(createIncrementAction(value*1))},500)}render() {return (<div><h1>当前求和为：{store.getState()}</h1><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div>)}
}redux下的constant.js
/* 该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
redux下的count_action.js
/* 该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})redux下的count_reducer.js
/* 1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {INCREMENT,DECREMENT} from './constant'const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){// console.log(preState);//从action对象中获取：type、dataconst {type,data} = action//根据type决定如何加工数据switch (type) {case INCREMENT: //如果是加return preState + datacase DECREMENT: //若果是减return preState - datadefault:return preState}
}
redux下的store.js
/* 该文件专门用于暴露一个store对象，整个应用只有一个store对象
*///引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//暴露store
export default createStore(countReducer)
总结
新增文件：
1.count_action.js 专门用于创建action对象
2.constant.js 放置容易写错的type值
4、异步Action版
还是上面的例子
变化的文件
components下的Count下的index.jsx
import React, { Component } from 'react'
//引入store，用于获取redux中保存状态
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction
} from '../../redux/count_action'export default class Count extends Component {state = {carName:'奔驰c63'}/* componentDidMount(){//检测redux中状态的变化，只要变化，就调用renderstore.subscribe(()=>{this.setState({})})} *///加法increment = ()=>{const {value} = this.selectNumberstore.dispatch(createIncrementAction(value*1))}//减法decrement = ()=>{const {value} = this.selectNumberstore.dispatch(createDecrementAction(value*1))}//奇数再加incrementIfOdd = ()=>{const {value} = this.selectNumberconst count = store.getState()if(count % 2 !== 0){store.dispatch(createIncrementAction(value*1))}}//异步加incrementAsync = ()=>{const {value} = this.selectNumber// setTimeout(()=>{store.dispatch(createIncrementAsyncAction(value*1,500))// },500)}render() {return (<div><h1>当前求和为：{store.getState()}</h1><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div>)}
}Redux下的count_actions.js
/* 该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'//同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {return (dispatch)=>{setTimeout(()=>{dispatch(createIncrementAction(data))},time)}
}
Redux下的store.js
/* 该文件专门用于暴露一个store对象，整个应用只有一个store对象
*///引入createStore，专门用于创建redux中最为核心的store对象
import { createStore, applyMiddleware } from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//暴露store
export default createStore(countReducer, applyMiddleware(thunk))
其他和上面完全一样
总结
(1).明确：延迟的动作不想交给组件自身，想交给action
(2).何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。
(3).具体编码：
1).yarn add redux-thunk，并配置在store中
2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
3).异步任务有结果后，分发一个同步的action去真正操作数据。
(4).备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。
四、redux的核心API总结
-
createstore()
作用：创建包含指定reducer的store对象 -
store对象1、作用: redux库最核心的管理对象
2、它内部维护着:
1) state
2) reducer3、核心方法:
1)getState()
2)dispatch(action)
3)subscribe(listener)4、具体编码
1)store.getState()
2)store.dispatch({type:'INCREMENT', number})
3)store.subscribe(render) -
applyMiddleware()
作用：应用上基于redux的中间件(插件库) -
combineReducers()
作用：合并多个reducer函数
五、react-redux的基本使用（官方出的插件库，和Redux并不是一个东西，Redux是第三方的）
1、理解
- 一个react插件库
- 专门用来简化react应用中使用redux
2、react-Redux将所有组件分成两大类
- UI组件
- 只负责 UI 的呈现，不带有任何业务逻辑
- 通过props接收数据(一般数据和函数)
- 不使用任何 Redux 的 API
- 一般保存在components文件夹下
- 容器组件
- 负责管理数据和业务逻辑，不负责UI的呈现
- 使用 Redux 的 API
- 一般保存在containers文件夹下
3、连接容器组件与UI组件
还是上面的示例，新添加了containers\Count\Count.jsx
containers\Count\Count.jsx
//引入Count的UI组件
import CountUI from '../../components/Count/Count'
//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'//使用connect()()创建并暴露一个Count的容器组件
export default connect()(CountUI)
components\Count\Count.jsx
import React, { Component } from 'react'export default class Count extends Component {increment = () => {const { value } = this.selectNumber}decrement = () => {const { value } = this.selectNumber}incrementIfOdd = () => {const { value } = this.selectNumber}incrementAsync = () => {const { value } = this.selectNumber}render () {return (<div><h1>当前求和为: ???</h1><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> <button onClick={this.increment}>加</button><button onClick={this.decrement}>减</button><button onClick={this.incrementIfOdd}> 当前求和为奇数再加</button><button onClick={this.incrementAsync}>异步加</button></div>)}
}App.jsx
import React, { Component } from 'react'
import Count from './containers/Count/Count'
import store from './Redux/store'
export default class App extends Component {render () {return (<div>{/* 给容器组件传递store */}<Count store={store} /></div>)}
}其他的和上面的都一样
4、react-redux的基本使用
还是上面的示例，在上面的示例的基础上做修改
containers\Count\Count.jsx
//引入Count的UI组件
import CountUI from '../../components/Count'
//引入action
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction
} from '../../redux/count_action'//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'/* 1.mapStateToProps函数返回的是一个对象；2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value3.mapStateToProps用于传递状态
*/
function mapStateToProps(state){return {count:state}
}/* 1.mapDispatchToProps函数返回的是一个对象；2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value3.mapDispatchToProps用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch){return {jia:number => dispatch(createIncrementAction(number)),jian:number => dispatch(createDecrementAction(number)),jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),}
}//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)components\Count\Count.jsx
import React, { Component } from 'react'export default class Count extends Component {//加法increment = ()=>{const {value} = this.selectNumberthis.props.jia(value*1)}//减法decrement = ()=>{const {value} = this.selectNumberthis.props.jian(value*1)}//奇数再加incrementIfOdd = ()=>{const {value} = this.selectNumberif(this.props.count % 2 !== 0){this.props.jia(value*1)}}//异步加incrementAsync = ()=>{const {value} = this.selectNumberthis.props.jiaAsync(value*1,500)}render() {//console.log('UI组件接收到的props是',this.props);return (<div><h1>当前求和为：{this.props.count}</h1><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div>)}
}其他的和上面的一样
总结
(1).明确两个概念：
1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。
2).容器组件：负责和redux通信，将结果交给UI组件。
(2).如何创建一个容器组件————靠react-redux 的 connect函数
connect(mapStateToProps,mapDispatchToProps)(UI组件)
-mapStateToProps:映射状态，返回值是一个对象
-mapDispatchToProps:映射操作状态的方法，返回值是一个对象
(3).备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
(4).备注2：mapDispatchToProps，也可以是一个对象
5、上面的示例代码优化
在上面示例的基础上，可以优化的地方
(1).容器组件和UI组件整合一个文件
(2).无需自己给容器组件传递store，给<App/>包裹一个<Provider store={store}>即可。
(3).使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。
(4).mapDispatchToProps也可以简单的写成一个对象
(5).一个组件要和redux“打交道”要经过哪几步？
1).定义好UI组件—不暴露
2).引入connect生成一个容器组件，并暴露，写法如下：
connect(
state => ({key:value}), //映射状态
{key:xxxxxAction} //映射操作状态的方法
)(UI组件)
(3).在UI组件中通过this.props.xxxxxxx读取和操作状态
优化好的目录结构
index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
import {Provider} from 'react-redux'ReactDOM.render(<Provider store={store}><App/></Provider>,document.getElementById('root')
)
App.jsx
import React, { Component } from 'react'
import Count from './containers/Count'export default class App extends Component {render() {return (<div><Count/></div>)}
}redux下的constant.js
/* 该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
redux下的count_action.js
/* 该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'//同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {return (dispatch)=>{setTimeout(()=>{dispatch(createIncrementAction(data))},time)}
}
redux下的count_reducer.js
/* 1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {INCREMENT,DECREMENT} from './constant'const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){// console.log(preState);//从action对象中获取：type、dataconst {type,data} = action//根据type决定如何加工数据switch (type) {case INCREMENT: //如果是加return preState + datacase DECREMENT: //若果是减return preState - datadefault:return preState}
}
redux下的store.js
主要优化的地方
/* 该文件专门用于暴露一个store对象，整个应用只有一个store对象
*///引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//暴露store
export default createStore(countReducer,applyMiddleware(thunk))
contaniners下的Count下的index.jsx
import React, { Component } from 'react'
//引入action
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction
} from '../../redux/count_action'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'//定义UI组件
class Count extends Component {state = {carName:'奔驰c63'}//加法increment = ()=>{const {value} = this.selectNumberthis.props.jia(value*1)}//减法decrement = ()=>{const {value} = this.selectNumberthis.props.jian(value*1)}//奇数再加incrementIfOdd = ()=>{const {value} = this.selectNumberif(this.props.count % 2 !== 0){this.props.jia(value*1)}}//异步加incrementAsync = ()=>{const {value} = this.selectNumberthis.props.jiaAsync(value*1,500)}render() {//console.log('UI组件接收到的props是',this.props);return (<div><h1>当前求和为：{this.props.count}</h1><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div>)}
}//使用connect()()创建并暴露一个Count的容器组件
export default connect(state => ({count:state}),//mapDispatchToProps的一般写法/* dispatch => ({jia:number => dispatch(createIncrementAction(number)),jian:number => dispatch(createDecrementAction(number)),jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),}) *///mapDispatchToProps的简写{jia:createIncrementAction,jian:createDecrementAction,jiaAsync:createIncrementAsyncAction,}
)(Count)6、上面的示例实现数据共享
在上面的示例的基础上新增加一组person相关的组件以及redux的相关文件
目录结构为
index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
import {Provider} from 'react-redux'ReactDOM.render(/* 此处需要用Provider包裹App，目的是让App所有的后代容器组件都能接收到store */<Provider store={store}><App/></Provider>,document.getElementById('root')
)
App.jsx
import React, { Component } from 'react'
import Count from './containers/Count' //引入的Count的容器组件
import Person from './containers/Person' //引入的Person的容器组件export default class App extends Component {render() {return (<div><Count/><hr/><Person/></div>)}
}containers下的Count下的index.jsx
import React, { Component } from 'react'
//引入action
import {increment,decrement,incrementAsync
} from '../../redux/actions/count'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'//定义UI组件
class Count extends Component {state = {carName:'奔驰c63'}//加法increment = ()=>{const {value} = this.selectNumberthis.props.increment(value*1)}//减法decrement = ()=>{const {value} = this.selectNumberthis.props.decrement(value*1)}//奇数再加incrementIfOdd = ()=>{const {value} = this.selectNumberif(this.props.count % 2 !== 0){this.props.increment(value*1)}}//异步加incrementAsync = ()=>{const {value} = this.selectNumberthis.props.incrementAsync(value*1,500)}render() {//console.log('UI组件接收到的props是',this.props);return (<div><h2>我是Count组件,下方组件总人数为:{this.props.renshu}</h2><h4>当前求和为：{this.props.count}</h4><select ref={c => this.selectNumber = c}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div>)}
}//使用connect()()创建并暴露一个Count的容器组件
export default connect(state => ({count:state.count,personCount:state.persons.length}),{increment,decrement,incrementAsync}
)(Count)containers下的Person下的index.jsx
import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {addPerson} from '../../redux/actions/person'class Person extends Component {addPerson = ()=>{const name = this.nameNode.valueconst age = this.ageNode.value*1const personObj = {id:nanoid(),name,age}this.props.addPerson(personObj)this.nameNode.value = ''this.ageNode.value = ''}render() {return (<div><h2>我是Person组件,上方组件求和为{this.props.count}</h2><input ref={c=>this.nameNode = c} type="text" placeholder="输入名字"/><input ref={c=>this.ageNode = c} type="text" placeholder="输入年龄"/><button onClick={this.addPerson}>添加</button><ul>{this.props.persons.map((p)=>{return <li key={p.id}>{p.name}--{p.age}</li>})}</ul></div>)}
}export default connect(state => ({persons:state.persons,count:state.count}),//映射状态{addPerson}//映射操作状态的方法
)(Person)redux下的actions下的count.js
/* 该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from '../constant'//同步action，就是指action的值为Object类型的一般对象
export const increment = data => ({type:INCREMENT,data})
export const decrement = data => ({type:DECREMENT,data})//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const incrementAsync = (data,time) => {return (dispatch)=>{setTimeout(()=>{dispatch(increment(data))},time)}
}
redux下的actions下的person.js
import {ADD_PERSON} from '../constant'//创建增加一个人的action动作对象
export const addPerson = personObj => ({type:ADD_PERSON,data:personObj})
redux下的reducers下的count.js
/* 1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {INCREMENT,DECREMENT} from '../constant'const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){// console.log('countReducer@#@#@#');//从action对象中获取：type、dataconst {type,data} = action//根据type决定如何加工数据switch (type) {case INCREMENT: //如果是加return preState + datacase DECREMENT: //若果是减return preState - datadefault:return preState}
}
redux下的reducers下的person.js
import {ADD_PERSON} from '../constant'//初始化人的列表
const initState = [{id:'001',name:'tom',age:18}]export default function personReducer(preState=initState,action){// console.log('personReducer@#@#@#');const {type,data} = actionswitch (type) {case ADD_PERSON: //若是添加一个人//preState.unshift(data) //此处不可以这样写，这样会导致preState被改写了，personReducer就不是纯函数了。return [data,...preState]default:return preState}
}redux下的reducers下的index.js
/* 该文件用于汇总所有的reducer为一个总的reducer
*/
//引入combineReducers，用于汇总多个reducer
import {combineReducers} from 'redux'
//引入为Count组件服务的reducer
import count from './count'
//引入为Person组件服务的reducer
import persons from './person'//汇总所有的reducer变为一个总的reducer
export default combineReducers({count,persons
})redux下的constant.js
/* 该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
export const ADD_PERSON = 'add_person'
redux下的store.js
/* 该文件专门用于暴露一个store对象，整个应用只有一个store对象
*///引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入汇总之后的reducer
import reducer from './reducers'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//引入redux-devtools-extension
import {composeWithDevTools} from 'redux-devtools-extension'//暴露store
export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))
最终效果
总结：
(1).定义一个Pserson组件，和Count组件通过redux共享数据。
(2).为Person组件编写：reducer、action，配置constant常量。
(3).重点：Person的reducer和Count的Reducer要使用combineReducers进行合并，合并后的总状态是一个对象！！！
(4).交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。
(5).所有变量名字要规范，尽量触发对象的简写形式。
(6).reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer
六、纯函数和高阶函数
1、纯函数
- 一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)
- 必须遵守以下一些约束
- 不得改写参数数据
- 不会产生任何副作用，例如网络请求，输入和输出设备
- 不能调用Date.now()或者Math.random()等不纯的方法
- redux的reducer函数必须是一个纯函数
比如上面的例子reducers下的person.js如果写成下面这种样子就不行了，就不是纯函数了
import { ADDPERSON } from '../constant'
import { nanoid } from 'nanoid'
const initState = [{ id: nanoid(), name: 'tom', age: 18 }]
export default function personReducer (preState = initState, action) {const { type, data } = actionswitch (type) {// case ADDPERSON:// preState.unshift(data)// return preState//上面这样写就不是纯函数，因为改写了参数preState，personReducer就不是纯函数了case ADDPERSON:return [data, ...preState]default:return preState}}
2、 高阶函数
- 理解: 一类特别的函数
1）情况1: 参数是函数
2）情况2: 返回是函数 - 常见的高阶函数:
- 定时器设置函数
- 数组的forEach()/map()/filter()/reduce()/find()/bind()
- promise
- react-redux中的connect函数
- 作用: 能实现更加动态, 更加可扩展的功能
七、使用redux调试工具
1、首先在chrome商店下载这个工具
2、在项目中（需要引入一个库，才能正常使用）执行以下命令
npm install --save-dev redux-devtools-extension
3、修改store.js
下一篇react扩展知识在这里
react扩展知识