一:Redux
1、概念:
redux是一个专门为react.js应用程序开发的状态管理模式
2、网址:
https://www.redux.org.cn/
3、特点:
集中式存储管理应用的所有组件状态
4、核心概念:
--state:state表示所有的状态数据
--Store:存储数据的地方
--action:为一个对象,表示一个动作对state进行怎样的操作,type属性是必须的,表示的是action的名称,其他的属性可以自由设置,由组件store.dispath("action名",参数)触发
--reducer:store收到action后,必须计算出新的state值,这个过程计算reducer
--dispath:store操作行为触发方法,store.dispath("action名",参数)
--subscribe:表示数据的监听,store.subscribe方法设置监听函数,当state数据改变时,就会执行这个函数
--getState():store.getState()可以获取state状态数据
5、下载:
npm i redux @4.1.1
6、语法:
redux创建
1、创建一个store文件夹
2、解构一个createStore,表示创建一个Redux store存放应用中所有的state。
import {createStore} from "redux"
3、定义状态数据state
const 自定义state名 ={
定义状态值
}
4、定义reducer,定义action动作对state状态数据做相应的操作
const 自定义 = (state = 自定义state名,action){
//定义action对象
switch(action.type){
case "action名":
return{
操作state值
}
default:
return state
}
}
6、当应用中有多个reducer时,可以使用redux中的combineReducers,可以将多个reducer集中在一起
const reducer = combineReducers({
reducerCounter,
reducerCart
})
5、将reducer暴露出去
export const store = createStore(reducer)
redux使用:
1、引入store
import { store } from '../store'
2、触发action方法
store.dispatch({ type: 'action方法名' })
3、在挂载钩子函数中监听数据,当redux中的数据改变时实时更改页面的数据
componentDidMount() {
//启动监听,监听state状态数据变化
this.unsub = store.subscribe(() => {
//state状态数据变化执行
this.setState({ 需改变的state状态值: store.getState().reducer名.定义的state状态值 })
})
}
4、当数据改变完成后,将监听销毁
componentWillUnmount() {
this.unsub() //销毁监听
}
7、封装
1、封装actiontype:
export const ADD_CART = "ADD_CART"
2、封装action:
1、引入actiontype
import { ADD_CART } from "../actionType";
2、定义action动作将其暴露
export funtion createActionCart(product){
return{
type:'action名',
product //传值
}
}
3、封装reduce:
1、引入actiontype
import { ADD_CART } from "../actionType";
2、定义state状态数据
const 自定义state名 ={
定义状态值
}
3、定义reducer,定义action动作对state状态数据做相应的操作,并暴露
8、集成中间件
npm i redux-thunk@2.4.1
8、小知识点
1、css局部有效
--css文件名为:xx.module.css
--使用:
import styles from "./index.module.scss"
在根标签内使用styles.类名
className={styles.container}