React（8）—— Redux - 三大核心概念 - store - reducer - actionn - Redux调试工具 - React-redux - 纯函数 - 高阶函数(1)

2. 包含 2 个属性

①type：标识属性, 值为字符串, 唯一, 必要属性

②data：数据属性, 值类型任意, 可选属性

3. 例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }

---

三、API

========================================================================

1. createStore（）

---

作用：创建包含指定reducer的store对象

2. store对象

---

1. 作用: redux库最核心的管理对象

2. 它内部维护着:

①state

②reducer

3. 核心方法:

①getState()

②dispatch(action)

③subscribe(listener)

4. 具体编码:

①store.getState()

②store.dispatch({type:'INCREMENT', number})

③store.subscribe(render)

3. applyMiddleware（）

---

作用：应用上基于redux的中间件(插件库)，Middleware 可以让你包装 store 的 dispatch 方法来达到你想要的目的，例如可以让store分发异步函数。

4. combineReducer（）

---

作用：合并多个reducer函数

---

四、使用redux编写应用

================================================================================

1. 效果

---

2. 实现

---

redux/store.js

该文件专门用于暴露一个store对象，整个应用只有一个store对象

// 引入createStore，专门用于创建redux中最为核心的store对象

import { createStore } from “redux”;

// 引入为Count组件服务的reducer

import countReducer from “./count_reducer.js”;

// 暴露store

export default createStore(countReducer);

redux/count_reducer.js

该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数

reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)

import {INCREMENT,DECREMENT} from ‘./constant’

const initState = 0 //初始化状态

export default function countReducer(preState=initState,action){

// console.log(preState);

//从action对象中获取：type、data

const {type,data} = action

//根据type决定如何加工数据

switch (type) {

case INCREMENT: //如果是加

return preState + data

case DECREMENT: //若果是减

return preState - data

default:

return preState

}

}

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/constant.js

该文件专门为Count组件生成action对象

import {INCREMENT,DECREMENT} from ‘./constant’

export const createIncrementAction = data => ({type:INCREMENT,data})

export const createDecrementAction = data => ({type:DECREMENT,data})

Count/index.jsx

该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的，同时防止程序员单词写错

export const INCREMENT = ‘increment’

export const DECREMENT = ‘decrement’

index.js

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 {

/* componentDidMount(){

//检测redux中状态的变化，只要变化，就调用render

store.subscribe(()=>{

this.setState({})

})

} */

//加法

increment = ()=>{

const {value} = this.selectNumber

store.dispatch(createIncrementAction(value*1))

}

//减法

decrement = ()=>{

const {value} = this.selectNumber

store.dispatch(createDecrementAction(value*1))

}

//奇数再加

incrementIfOdd = ()=>{

const {value} = this.selectNumber

const count = store.getState()

if(count % 2 !== 0){

store.dispatch(crea