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

npm i redux

2. Redux是什么?

---

1. redux是一个专门用于做状态管理的JS库(不是react插件库)。

2. 可以用在react, angular, vue等项目中, 但基本与react配合使用。

3. 作用: 集中式管理react应用中多个组件共享的状态。

3. 什么情况下需要使用Redux?

---

1. 某个组件的状态，需要让其他组件可以随时拿到（共享）

2. 一个组件需要改变另一个组件的状态（通信）

3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用

4. Redux的工作流程

---

---

二、Redux的三大核心概念

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

1. store

---

1. 将state、action、reducer联系在一起的对象

2. 如何得到此对象?

①import {createStore} from 'redux'

②import reducer from './reducers'

③const store = createStore(reducer)

3. 此对象的功能?

①getState(): 得到state

②dispatch(action): 分发action, 触发reducer调用, 产生新的state

③subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

2. reducer

---

1. 用于初始化状态、加工状态。

2. 加工时，根据旧的state和action， 产生新的state的纯函数。

3. action

---

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

}

}