# 一前言

状态管理是单页面应用解决组件状态共享，复杂组件通信的技术方案。接下来的两个章节，我们将详细介绍 React 应用中常见的两种状态管理方式- React-Redux 和 React-Mobx 。

本章节主要讲 React-Redux，包括Redux 设计思想、中间件原理，以及 React-Redux 的用法和原理。

# 1 状态管理应用场景

状态管理工具为什么受到开发者的欢迎呢？我认为首先应该想想状态管理适用于什么场景。解决了什么问题。

① 组件之间共用数据，如何处理?

设想一种场景，就是一些通过 ajax 向服务器请求的重要数据，比如用户信息，权限列表，可能会被多个组件需要，那么如果每个组件初始化都请求一遍数据显然是不合理的。这时候常用的一种解决方案是，应用初始化时候，只请求一次数据，然后通过状态管理把数据存起来，需要数据的组件只需要从状态管理中‘拿’就可以了。

效果图：

② 复杂组件之间如何通信？

还有一种场景就是对于 spa 单页面应用一切皆组件，对于嵌套比较深的组件，组件通信成了一个棘手的问题。比如如下的场景， B 组件向 H 组件传递某些信息，那么常规的通信方式似乎难以实现。

这个时候状态管理就派上用场了，可以把 B 组件的信息传递给状态管理层，H 组件连接状态管理层，再由状态管理层通知 H 组件，这样就本质解决了组件通信问题。

# 2 React-Redux,Redux,React三者关系

在深入研究 React-Redux 之前，应该先弄明白 React-Redux ，Redux ， React 三者到底是什么关系。

Redux：首先 Redux 是一个应用状态管理js库，它本身和 React 是没有关系的，换句话说，Redux 可以应用于其他框架构建的前端应用，甚至也可以应用于 Vue 中。
React-Redux：React-Redux 是连接 React 应用和 Redux 状态管理的桥梁。React-redux 主要专注两件事，一是如何向 React 应用中注入 redux 中的 Store ，二是如何根据 Store 的改变，把消息派发给应用中需要状态的每一个组件。
React：这个就不必多说了。

三者的关系图如下所示：

# 3 温习 Redux

彻底弄明白 React-Redux 之前，就必须要搞懂 Redux 在 React 中扮演的角色。Redux 的设计满足以下三个原则：

# ①三大原则

1 单向数据流：整个 redux ，数据流向都是单向的，我用一张官网的图片描述整个数据流动的流程。

2 state 只读：在 Redux 中不能通过直接改变 state ，来让状态发生变化，如果想要改变 state ，那就必须触发一次 action ，通过 action 执行每个 reducer 。
3 纯函数执行：每一个 reducer 都是一个纯函数，里面不要执行任何副作用，返回的值作为新的 state ，state 改变会触发 store 中的 subscribe 。

# ②发布订阅思想

redux 可以作为发布订阅模式的一个具体实现。redux 都会创建一个 store ，里面保存了状态信息，改变 store 的方法 dispatch ，以及订阅 store 变化的方法 subscribe 。

# ③中间件思想

redux 应用了前端领域为数不多的中间件 compose ，那么 redux 的中间件是用来做什么的？答案只有一个：那就是强化 dispatch ， Redux 提供了中间件机制，使用者可以根据需要来强化 dispatch 函数，传统的 dispatch 是不支持异步的，但是可以针对 Redux 做强化，于是有了 redux-thunk，redux-actions 等中间件，包括 dvajs 中，也写了一个 redux 支持 promise 的中间件。

一起来看一下 compose 是如何实现的：

const compose = (...funcs) => {
  return funcs.reduce((f, g) => (x) => f(g(x)));
}

@前端进阶之旅: 代码已经复制到剪贴板

funcs 为中间件组成的数组，compose 通过数组的 reduce 方法，实现执行每一个中间件，强化 dispatch 。

# ④核心api

对于内部原理，我这里就不多说了，毕竟这节主要讲的是 React-Redux ，主要先来看一下 redux 几个比较核心的 api:

createStore

createStore redux中通过 createStore 可以创建一个 Store ，使用者可以将这个 Store 保存传递给 React 应用，具体怎么传递那就是 React-Redux 做的事了。首先看一下 createStore 的使用：

const Store = createStore(rootReducer,initialState,middleware)

@前端进阶之旅: 代码已经复制到剪贴板

参数一 reducers ： redux 的 reducer ，如果有多个那么可以调用 combineReducers 合并。
参数二 initialState ：初始化的 state 。
参数三 middleware ：如果有中间件，那么存放 redux 中间件。

combineReducers

/* 将 number 和 PersonalInfo 两个reducer合并   */
const rootReducer = combineReducers({ number:numberReducer,info:InfoReducer })

@前端进阶之旅: 代码已经复制到剪贴板

正常状态可以会有多个 reducer ，combineReducers 可以合并多个reducer。

applyMiddleware

const middleware = applyMiddleware(logMiddleware)

@前端进阶之旅: 代码已经复制到剪贴板

applyMiddleware 用于注册中间价，支持多个参数，每一个参数都是一个中间件。每次触发 action ，中间件依次执行。

# ⑤ 实战-redux基本用法

第一步：编写reducer

/* number Reducer */
function numberReducer(state=1,action){
  switch (action.type){
    case 'ADD':
      return state + 1
    case 'DEL':
      return state - 1
    default:
      return state
  }
}
/* 用户信息reducer */
function InfoReducer(state={},action){
  const { payload = {} } = action
   switch (action.type){
     case 'SET':
       return {
         ...state,
         ...payload
       }
     default:
       return state
   }
}

@前端进阶之旅: 代码已经复制到剪贴板

编写了两个 reducer ，一个管理变量 number ，一个保存信息 info 。

第二步：注册中间件

/* 打印中间件 */
/* 第一层在 compose 中被执行 */
function logMiddleware(){
    /* 第二层在reduce中被执行 */
    return (next) => {
      /* 返回增强后的dispatch */
      return (action)=>{
        const { type } = action
        console.log('发生一次action:', type )
        return next(action)
      }
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

在重点看一下 redux 的中间件的编写方式，本质上应用了函数柯里化。

第三步：生成Store

/* 注册中间件  */
const rootMiddleware = applyMiddleware(logMiddleware)
/* 注册reducer */
const rootReducer = combineReducers({ number:numberReducer,info:InfoReducer  })
/* 合成Store */
const Store = createStore(rootReducer,{ number:1 , info:{ name:null } } ,rootMiddleware)

@前端进阶之旅: 代码已经复制到剪贴板

这一步没什么好说的，直接注册就可以了。

第四步：试用redux

function Index(){
  const [ state , changeState  ] = useState(Store.getState())
  useEffect(()=>{
    /* 订阅state */
    const unSubscribe = Store.subscribe(()=>{
         changeState(Store.getState())
     })
    /* 解除订阅 */
     return () => unSubscribe()
  },[])
  return <div >
          <p>  { state.info.name ? `hello, my name is ${ state.info.name}` : 'what is your name' } ,
           { state.info.mes ? state.info.mes  : ' what do you say? '  } </p>
         《React进阶实践指南》 { state.number } 👍 <br/>
        <button onClick={()=>{ Store.dispatch({ type:'ADD' })  }} >点赞</button>
        <button onClick={()=>{ Store.dispatch({ type:'SET',payload:{ name:'alien' , mes:'let us learn React!'  } }) }} >修改标题</button>
     </div>
}

@前端进阶之旅: 代码已经复制到剪贴板

为了让大家直观看到效果，可以直接把 redux 和 react 直接结合起来使用，在 useEffect 中进行订阅和解除订阅，通过 useState 改变视图层。
store.getState 可以获取 redux 最新的 state 。

效果

总结：

上述demo中，没有用到 react-redux ，但是明显暴露了很多问题。我来做一下总结：

1 首先想要的状态是共用的，上述 demo 无法满足状态共用的情况。
2 正常情况不可能将每一个需要状态的组件都用 subscribe / unSubscribe 来进行订阅
3 比如 A 组件需要状态 a，B 组件需要状态 b ，那么改变 a，只希望 A 组件更新，不希望 B 组件更新，显然上述是不能满足的。
4 …

所以为了解决上述诸多问题，react-redux 就应运而生了。

# 二 React-Redux用法

上述讲到 React-Redux 是沟通 React 和 Redux 的桥梁，它主要功能体现在如下两个方面：

1 接受 Redux 的 Store，并把它合理分配到所需要的组件中。
2 订阅 Store 中 state 的改变，促使消费对应的 state 的组件更新。

# 1 用法简介

# Provider

由于 redux 数据层，可能被很多组件消费，所以 react-redux 中提供了一个 Provider 组件，可以全局注入 redux 中的 store ，所以使用者需要把 Provider 注册到根部组件中。

Provider 作用就是保存 redux 中的 store ，分配给所有需要 state 的子孙组件。

例子🌰：

# connect

①mapStateToProps

# 一 前言

# 1 状态管理应用场景

# 2 React-Redux,Redux,React三者关系

# 3 温习 Redux

# ①三大原则

# ②发布订阅思想

# ③中间件思想

# ④核心api

# ⑤ 实战-redux基本用法

# 二 React-Redux用法

# 1 用法简介

# Provider

# connect

# 一前言

生态篇 React redux|React进阶专题

生态篇 React redux|React进阶专题