2022-04-11 学习记录--React-邂逅Redux（一）—— redux精简版

React-邂逅Redux（一）—— redux精简版

“天道酬勤，与君共勉”——因为个人原因，这篇笔记已经堆了十几天啦❀，所以今天来做一下总结，嘻嘻☺️

一、学习文档

1. 英文文档：https://redux.js.org/
2. 中文文档：http://www.redux.org.cn/
3. Github：https://github.com/reactjs/redux

二、redux是什么？

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

三、什么情况下需要使用redux？

1. 某个组件的状态，需要让其他组件可以随时拿到(共享)；
2. 一个组件需要改变另一个组件的状态(通信)；
3. 总体原则：能不用就不用，如果不用比较吃力才考虑使用。【如果没有大量组件要共享的话，就没有必要使用redux 实现多个组件共享状态】

四、redux工作流程

五、redux的三个核心概念

• 一、action
  • 1、动作的对象
  • 2、包含2个属性
    • type：标识属性，值为字符串，唯一，必要属性；
    • data：数据属性，值类型任意，可选属性。
  • 3、举例：{type:'ADD_STUDENT',data:{name:'tom',age:18}}
• 二、reducers
  • 1、reducers不仅可以加工对象，还可以初始化对象；
    • 加工对象时，previousState为之前的状态，根据previousState和action，产生新的state的纯函数；
    • 初始化对象时，previousState为undefined；
• 三、store【redux 应用只有一个单一的 store】
  • 1、将state、action、reducers联系在一起的对象
  • 2、如何得到此对象？
    • (1) import {createStore} from 'redux'
    • (2) import reducer from './reducers'
    • (3) const store = createStore(reducer)
  • 3、此对象的功能？
    • (1) getState()：得到state；
    • (2) dispatch(action)：分发 action，触发 reducers 调用，产生新的 state；
    • (3) subscribe(listener)：注册监听，当产生了新的state时，自动调用。

六、redux的使用

一、准备部分

• 第一步、安装redux
  • 安装方法：yarn add redux / npm install redux
• 第二步、在src里面新建一个文件夹redux（用于存放所有与redux相关的文件）：
  
• 第三步、在文件夹redux里新建文件store.js和count_reducer.js，如下图：
  • 文件count_reducer.js的命名解析：文件是reducer，负责初始化和加工状态；为谁服务的：组件Count。
    

store.js：【固定写法】

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

// 1、引入createStore（方法），专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
// 2、引入为Count组件服务的reducer（从count_reducer.js里引入）
import countReducer from './count_reducer'

// 3、暴露store对象
/* 第一种写法：分开写 */
// const store = createStore(countReducer); // 创建一个store对象：createStore是一个创建store对象的方法，指定一个reducer
// export default store; // 暴露store对象，即 将store对象默认暴露出去

/* 第二种方法：合并写，简洁 */
export default createStore(countReducer); // 暴露store对象，即 将store对象默认暴露出去

count_reducer.js：【根据需求进行修改】

/* 
    1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
    2.reducer函数会接到两个参数，分别为：之前的状态(preState)、动作对象(action)
*/

/* 第一种写法 */
// export default function countReducer(preState,action) {
//     if(preState === undefined) preState = 0 // 如果preState为undefined，此时reducer的作用是初始化对象（这儿将preState的值设为0）
//     // 从action对象中获取：type、data
//     const {type,data} = action;
//     // 根据type决定如何加工数据
//     switch(type) {
//         case 'increment': // 如果是加
//             return preState + data;
//         case 'decrement': // 如果是减
//             return preState - data;
//         default:
//             return preState;
//     }
// }

/* 第二种写法 */
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;
        default: // 默认情况下
            return preState;
    }
}

部分代码解析：

二、使用部分

第一种写法、在组件自身上写

首先，state里的值交给谁了就找谁要去(找redux里的store)，所以我们需要先引入store，代码如下：

// 引入store，用于获取redux中保存的状态
import store from '../../redux/store'

随后，结合实例，详细介绍一下store的三个API：

• 第一个：getState() 【store.getState()专门用于获取状态】
  • 比如：
    • 1、直接用在HTML里：

      当前求和为：{store.getState()}

    • 2、 用在jsx里：const count = store.getState();
• 第二个：dispatch()
  • 比如：
    • store.dispatch({type:'increment',data:value*1})：向store分发一个action对象(里面包含属性：type和data)

那。。。第三个呢？请继续往下看哟☺️

因为redux只是帮你管理状态而已，所以redux状态的更改 默认是不会引起页面数据的更新。

• 那。。。如何在改变redux状态后 实现页面数据的更新呢？(＾Ｕ＾)ノ
  • 如果redux里边所保存的状态发生了改变，此时我们想实现页面数据的更新，就需要我们自己去调一下组件的render。
  • question1、那。。。怎么能监测到redux状态的改变呢？
    • 我们可以在组件里进行监测，通过钩子componentDidMount（组件只要一挂载），监测redux中状态的变化，只要变化，就调用render。
    • 那。。。怎么监测呢？
      • 用store的第三个API：subscribe(里面接一个回调函数，只要redux里所保存的任何一个状态发生改变，都会调用这个回调函数)。【store.subscribe()专门用于订阅redux状态的更改】
  • question2、那。。。怎么调用组件的render呢？
    • 通过this.setState({})【就算传的是空对象，但只要你写了this.setState，它就会调render】

比如：

componentDidMount() { // 组件只要一挂载
  // 监测redux中状态的变化，只要变化，就调用render
  store.subscribe(() => {
    // 通过this.setState({})调用`render`
    this.setState({}); // 就算传的是空对象，但只要你写了this.setState，它就会调render
  })
}

第二种写法、在index.js（入口文件）里写

用上述写法确实可行，But，多个组件时，就需要多次监测redux状态的变化后调用render。

那。。。若想只监测一次滴话，该如何实现涅？

实现方法：在index.js（入口文件）里进行操作，如下图：

对应代码：

import store from './redux/store'

// 只要redux的状态发生任何变化，将整个App都重新调一下render
store.subscribe(() => { 
    ReactDOM.render(<App/>,document.getElementById('root'))
})

两种写法的总结

总结：

• 两种方法：
  • 1、在组件自身上写；
  • 2、在index.js（入口文件）里写
    

七、总结

求和案例_redux精简版
		(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只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

下一篇：React-邂逅Redux（二）

These are bilibili尚硅谷React学习视频的 学习笔记~