react-8 Redux 状态管理 - 持久化存储

1. 简介

redux是独立于react的库，是js状态管理库，提供可预测的状态管理。Vue也可用，但是和react比较搭配 。

2. 什么时候用 redux?

解决：任意：多组件共享状态，

解决：任意：两个组件共享数据

当：你不确定用不用，那就不要用（会用再用，知道为什么用才用）

3. 三大原则 ：：：

//最新版是配合函数式，我们这是class类组件式：所以装4
npm i redux@4

单一数据源store是共享的，但是是只读的，获取store，store.getState()。

单一数据源, 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中.

//单一数据源store数据仓库，只读的
console.log( store.getState() ) 

State 是只读的, 唯一改变 state 的方法就是触发(派发) action，action 是一个用于描述已发生事件的普通对象

修改需要触发action，store.dispatch()

修改后需要：监听store中数据的变化， store.subscribe()

//State 只读的，想修改需要触发action
store.dispatch({    type: 'DELETE_TODO',    index: 1 
}) 

//监听store中数据的变化
store.subscribe()

action触发后：需要使用纯函数来执行修改, 为了描述 触发 action 后如何改变 state tree ，你需要编写 reducer。

reducer 只做一件事情，通过之前的 state 和当前的 action 计算得出新的 state

相同的输入必须得到相同的输出结果，因此 reducer 必须是一个纯函数(reducer 中

不应该写有副作用的代码，比如定时器,ajax 请求).

 

4. 使用 Redux ：

react中没有响应式数据，要自己触发

可以多组件： 触发action 传值，会执行reducer.ts

多组件都可修改，但是值不实时更新，这里都要监听解决：让组件更新，可以获得实时数据

但是监听可能会导致内存泄漏：组件不见了，还在执行，内存泄漏了：取消监听解决

配置：

组件1，监听

组件2，监听：

 执行reducer.ts，记得返回新值，共享数据

解决内存泄漏：组件都需要 取消监听

 

1.   不要直接修改 state。 我们使用 Object.assign() 或 JSON.parse(JSON.stringfy()) 或 { ...state, ...newState } 新建一个 state 副本(拷贝)。不能这样使用 Object.assign(state,

{ text: action })，因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。你也可以使用 { ...state, ...newState } 达到相同的目的。

2.   在default 情况下返回旧的 state。遇到未知的 action 时，一定要返回旧的 state

5. 数据流

 

 

6. 代码模块化催

 

7. react-redux

 

8. redux 中间件

 

a) 概述

b) 理解中间件的机制一个啥都不干的中间件.

c)   redux-thunk使用

d) redux-logger 的使用

e) redux-persist 的使用 redux-persist 是一个能实现对 store 持久化的中间件.

npm i redux-persist