React中redux的使用之redux的简单理解，以及创建并使用一个精简版的redux

1）redux是什么

1. redux是一个专门用于做状态管理的JS库(不是react插件库)。
2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
3. 作用: 集中式管理react应用中多个组件共享的状态。

2） 什么情况下需要使用redux

1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。
2. 一个组件需要改变另一个组件的状态（通信）。
3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

3） redux的工作流程

4）redux的三个核心概念

一：action

1. 动作的对象
2. 包含2个属性
   1. type：标识属性, 值为字符串, 唯一, 必要属性
   2. data：数据属性, 值类型任意, 可选属性
3. 例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }

二：reducer

1. 用于初始化状态、加工状态。
2. 加工时，根据旧的state和action， 产生新的state的纯函数。

三：store

1. 将state、action、reducer联系在一起的对象
2. 如何得到此对象?
   1. import {legacy_createStore as createStore} from ‘redux’
   2. import reducer from ‘./reducers’
   3. const store = createStore(reducer)
3. 此对象的功能?
   1. getState(): 得到state
   2. dispatch(action): 分发action, 触发reducer调用, 产生新的state
   3. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

5）精简版的redux

首先

npm i 'redux'
1

src----->redux---->count_reducer.js

/* 
    该文件是用于创建一个为Count服务的reducer，reducer的本质就是一个函数
    reducer函数会接到两个参数，分别会：之前的状态(preState) ,动作对象(action)
*/
const initState=0 //初始化状态
export default function countReducer(preState=initState,action){
   
    // 从action对象中获取：type，data
    const {
   type,data}=action
    // 根据type决定如何加工数据
    switch (type) {
   
        case 'increment'://如果是加
            return preState+data
        case 'decrement'://如果是减
            return preState-data
        case 'incrementIfOdd':
            return preState+data
        case 'incrementAsync':
            return preState+data
        default:
            
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22