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. 它可以用在reactangularvue等项目中,但基本与react配合使用;
  3. 作用:集中式管理react应用中多个组件共享的状态。

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

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

四、redux工作流程

2022-04-11 学习记录--React-邂逅Redux(一)—— redux精简版_第1张图片

五、redux的三个核心概念

  • 一、action
    • 1、动作的对象
    • 2、包含2个属性
      • type:标识属性,值为字符串,唯一,必要属性;
      • data:数据属性,值类型任意,可选属性。
    • 3、举例:{type:'ADD_STUDENT',data:{name:'tom',age:18}}
  • 二、reducers
    • 1、reducers不仅可以加工对象,还可以初始化对象
      • 加工对象时,previousState之前的状态,根据previousStateaction,产生新的state的纯函数;
      • 初始化对象时,previousStateundefined
  • 三、storeredux 应用只有一个单一的 store
    • 1、将stateactionreducers联系在一起的对象
    • 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相关的文件):
    2022-04-11 学习记录--React-邂逅Redux(一)—— redux精简版_第2张图片
  • 第三步、在文件夹redux里新建文件store.jscount_reducer.js,如下图:
    • 文件count_reducer.js的命名解析:文件是reducer,负责初始化和加工状态;为谁服务的:组件Count
      2022-04-11 学习记录--React-邂逅Redux(一)—— redux精简版_第3张图片

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;
    }
}

部分代码解析:
2022-04-11 学习记录--React-邂逅Redux(一)—— redux精简版_第4张图片

二、使用部分
第一种写法、在组件自身上写

首先,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对象(里面包含属性:typedata)

那。。。第三个呢?请继续往下看哟☺️
在这里插入图片描述
因为redux只是帮你管理状态而已,所以redux状态的更改 默认是不会引起页面数据的更新。

  • 那。。。如何在改变redux状态后 实现页面数据的更新呢?(^U^)ノ
    • 如果redux里边所保存的状态发生了改变,此时我们想实现页面数据的更新,就需要我们自己去调一下组件的render
    • question1、那。。。怎么能监测到redux状态的改变呢?
      • 我们可以在组件里进行监测,通过钩子componentDidMount(组件只要一挂载),监测redux中状态的变化,只要变化,就调用render
      • 那。。。怎么监测呢?
        • store第三个APIsubscribe(里面接一个回调函数,只要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(入口文件)里进行操作,如下图:

2022-04-11 学习记录--React-邂逅Redux(一)—— redux精简版_第5张图片

对应代码:

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学习视频的 学习笔记~

你可能感兴趣的:(学习-React,前端,react.js)