redux是什么

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

什么情况下需要使用redux

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

alt

redux 的三个核心概念

  • action
  1. 动作的对象
  2. 包含两个属性
    • type：标识属性，值为字符串，唯一，必要属性
    • data：数据属性，值类型任意，可选属性
  3. 例子：{type:'ADD_STUDENT',data:{name:"tom",age:18}}
  • reducer
  1. 用于初始化状态，加工状态
  2. 加工时，根据旧的state和action，产生新的state的纯函数
  • store
  1. 将state、action、reducer联系在一起的对象
  2. 如何得到此对象？
    • import {createStore} from 'redux'
    • import reducer from './reducers'

纯函数和高阶函数

  • 纯函数
  1. 一类特别的函数：只要是同样的输入（实参），必定得到同样的输出（返回）
  2. 必须遵守以下一些约束
    1. 不得改写参数数据
    2. 不会产生任何副作用，例如网络请求，输入和输出设备
    3. 不能调用Date.now() 或者 Math.random() 等不纯的方法
  3. redux的renducer函数必须是一个纯函数
  • 高阶函数
  1. 理解：一类特别的函数
    1. 情况1：参数是函数
    2. 情况2：返回是函数
  2. 常见的高阶函数：

    1. 定时器设置函数

    2. 数组的forEach()/map()/filter()/reducer()/find()/bind()

    3. promise

1.求和案例_redux精简版

  1. 去除Count组件自身的状态
  2. src下建立：
      -src
        -redux
          -store.js
          -count_reducer.js
  1. store.js
  • 引入redux中的createStore函数，创建一个store
  • createStore调用时要传入一个为其服务的reducer
  • 记得暴露store对象
  1. count_reducer.js
  • reducer的本质是一个函数，接收：preState ， action。 返回加工后的状态
  • reducer有两个作用：初始化状态、加工状态
  • reducer被第一次调用时，时store自动触发的，传递的preState时undefined，传递的action是：{type:'@@REDUX/INIT_a.2.b.4'}
  1. 在index.js中检测store中状态的改变，一旦发生改变重新渲染
<App/>

备注：redux只负责管理状态，至于状态的改变驱动着页面的展示。要靠我们自己写

2.求和案例_redux完整版

新增文件：

  1. count_action.js 专门用于创建action对象
  2. constant.js 放置容易写错的type值

3.求和案例_redux异步action版

  1. 明确：延迟的动作不想交给组件自身，想交给action
  2. 何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回
  3. 具体编码：
    1. yarn add redux-thunk 并配置再store中
    2. 创建action的函数不在返回一般对象，而是一个函数，该函数中写异步任务
    3. 异步任务有结果后， 分发一个同步的action去真正操作数据
  4. 备注:异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action

alt

4.求和案例_react-redux基本使用

  1. 明确两个概念：

    • UI组件“不能使用任何redux的api，只负责页面的呈现、交互等
    • 容器组件：负责和redux通信，将结果交给UI组件

  2. 如何创建一个容器组件--靠react-redux 的connect函数

    connect(mapStateToProps,mapDispatchToProps)(UI组件)

    • mapStateToProps：映射状态，返回值是一个对象
    • mapDispatchToProps映射操作状态的方法，返回值是一个对象

  3. 备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入

  4. 备注2：mapDispatchToProps也可以是个对象

5.求和案例_react-redux优化

  1. 容器组件和UI组件混成一个文件
  2. 无需自己给容器组件传递store，给
<App/>

包裹一个

<Provider store={store}/>

即可 3. 使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作

  1. mapDispatchToProps 也可以简单的写成一个对象
  2. 一个组件要和redux“打交道”要经过那几步？

    1. 定义号UI组件---不暴露

    2. 引入connect生成一个容器组件，并暴露，写法如下“

        connect(
    state=>({key:value}),//映射状态
    {key:xxxxxxxxxxxAction}//映射操作状态的方法
  )(UI组件)

    3. 再UI组件中通过this.props.xxxxx读取和操作状态

6.求和案例_react-redux数据共享版

  1. 定义一个Person组件，和Count组件通过redux共享数据
  2. 为Person组件编写：reducer、action。配置constant常量
  3. 重点：Person的reducer和Count的reducer要使用combineReducers进行合并，合并后的总状态是一个对象！！！
  4. 交给store的是总reducer，最后注意再组件中取出状态的时候，记得“取到位”

7.求和案例_react-redux开发者工具的使用

  1. yarn add redux-devtools-extension
  2. store中进行配置
 import { composeWithDevTools } from "redux-devtools-extension";
 export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

8.求和案例_react-redux最终版

  1. 所有变量名字要规范，尽量触发对象的简写形式
  2. reducers文件夹中，编写index。js专门用于汇总并暴露所有的reducer