redux_20221111

redux

基本使用

1. 创建小皇帝

createStore()

2. 创建老佛爷

export default (preState,action) => {
  修改数据
  return 修改后的数据
}

3. 小皇帝和老佛爷关联生成store对象

createStore(reducer)

4. 通过store对象的 getState 获取数据
5. 通过store dispatch方法提交action 修改数据
6. 通过store.subscribu 监听改变更新页面
7. 组件销毁的时候销毁监听

通过自己写的高阶组件来优化redux的使用

react-redux 用来简化redux的使用

核心原理

1. 将store的数据放到组件的上下文上
2. 使用的时候先获取上下文的数据 通过高阶组件 放到props上

1. 提供store数据

import store from "./store/index.js"
import {Provider} from "react-redux"
render() {
  return (
    <div>
      ...
      <Provider store={store}>
        <Fa><Fa>
      <Provider>
    </div>
  )
}

2. 获取数据
   在需要的组件通过connect方法处理要使用的组件

import {connect} from "react-redux"
class Son extends React.component {
 
}

//  export default Son
epxort default connenct(state => state)(Son)

3.被connect处理组件就可以在props里访问 全局状态值
也可以使用porps里dispatch 修改数据

actioncreator

创建aciton
本质是一个对象，里面放了一堆的方法 通过这一堆的方法创建action

redux如果实现异步

redux-thunk
redux-promise
redux-saga
…

1. 引入异步插件 redux-thunk //react-thunk
   import {creatStore,applyMiddleware} from “redux”
   import thunk from “redux-thunk”
   export default creatStore(reducer,applyMiddleware(thunk))
2. 在actioncretore中使用
   export default {
   changeName() {
   return { type: ‘xxx’, playload: ‘xxx’}
   },
   changeAge() {
   return(dispatch) => {
   //写异步
   dispatch(acion)
   }
   }
   }

如何实现模块化

reducer中的模块化其实就是讲reducer进行拆分
拆分完毕通过combineReducers进行合并 同时添加模块名

let reducer = combineReducers({
  模块名1: reducer1,
  模块名2: reducer2
})

bindActionCreator mapActions mapMutations

在模块化的状态下获取数据

1. 在原先 获取数据的基础上添加模块名
2. 在 connect 进行出来（代码简化）

模块化下如何修改数据

和没有模块化一点都没变 还是通过dispatch 触发老佛爷
任何一个dispatch 会触发模块化所有的老佛爷
如果不同的模块下有相同的type类型 就会引发多次触发

• 写type类型的时候自己注意点
• 参考vue的namespace 在type类型的前面加模块名
  chagneName -> name/changeName name_changeName

使用常量来代替action types

1. 找一个文件夹 reducer使用的 type 全部用常量保存起来
2. reducer文件里需要用types 替换成常量
3. actioncreatore文件里 把types用常量替换

类组件

1. 创建一个类组件
2. react中的数据重载
   state this.setState
   props 组件外部传递而来不能改
3. 组件通信
   父子通信 props 传数据
   子父通信 props 传方法
   亲兄弟 状态提升 找个共有的父元素
   远方兄弟 上下文
   redux
4. 生命周期
   挂载
   更新
   销毁
   shouldComponentUpdate
5. ref
   • 绑dom
   • 绑组件
6. context 上下文 provider consumer
7. redux
   • 基本使用
   • react-redux
   • 异步中间件
   • 模块化

函数组件

16.8 hooks
hooks 弥补函数组价缺失的功能