redux

npm i redux

介绍

readux 是一个专门用于做状态管理的独立 js 库

vue、angular、react 啥子框架都可以用。就是共享数据的。

集中式管理 react 应用中多个组件共享的状态

能不用就不用。如果不用比较吃力(组件结构太复杂)才考虑使用。

redux 三个核心概念

action

动作的对象
包含 2 个属性
- type：标识属性, 值为字符串, 唯一, 必要属性
- data：数据属性, 值类型任意, 可选属性
例子：{ type: ‘ADD_STUDENT’,data: {name: ‘tom’,age:18} }

reducers

用于初始化状态、加工状态。
加工时，根据旧的 state 和 action，产生新的 state 的**纯函数**。

store

将 state、action、reducer 联系在一起的对象
如何得到此对象?

1
2
3

import { createStore } from "redux";
import reducer from "./reducers";
const store = createStore(reducer);

此对象的功能?

getState(): 得到 state
dispatch(action): 分发 action, 触发 reducer 调用, 产生新的 state
action 也直接写成一个对象。只要有 type 和 data 就可以了。
subscribe(listener): 注册监听, 当产生了新的 state 时, 自动调用

实践

1. redux 并非和 vuex 那样是响应式状态管理

需要手动配置，就是检测 store 状态更新的时候，再次调用 render 函数

一般推荐就在 index.js 全局中配置

使用 store.subscribe 包裹根组件的渲染即可

但默认的渲染还是要保留的嗷（就是两 render），不然页面不显示。

2. 最基本的 redux 使用流程

src 下建立:

-redux

-**store.js **

该文件就是为了创建和暴露 store 对象

//引入createStore 专门用于创建redux中核心的store对象
import { createStore } from "redux";
//引入为 Count组件服务的 reducer
import countReducer from "./count_reducer";
//导出 就是一个 状态共享以及管理核心对象了。
export default createStore(countReducer);

-count_reducer.js

该文件就是创建出来为 count 组件服务的。reducer 本质就是一个函数

/* 初始化值为 0 初始值写在最上面 可读性强 */
const initState = 0
/* 两个参数一个是初始值(核心数据)、一个是action */
export default function countReducer(preState=initState,action){
  const {type,data} = action
  //根据type决定如何加工数据
  switch(type){
    case 'increment': //如果是加
      return preState + data
    case 'decrement': //如果是减
      return preState - data
    default:
      return preState
  }