参考

尚硅谷React技术全家桶
Reducer 为什么必须是纯函数？

redux 简介

redux 是什么

1. redux 是一个专门用于做状态管理的 JS 库(不是 react 插件库)
2. 它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用。
3. 作用: 集中式管理 react 应用中多个组件共享的状态。

什么情况下需要使用 redux

1. 某个组件的状态，需要让其他组件可以随时拿到(共享)。
2. 一个组件需要改变另一个组件的状态(通信)。

redux 工作流程

redux 核心概念

action
reducer
store

redux 精简版

基本写法

store.js

// 引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'
// 暴露store
export default createStore(countReducer)

count_reducer.js

/* 
  1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
  2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/

const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
  // console.log(preState);
  //从action对象中获取：type、data
  const {type,data} = action
  //根据type决定如何加工数据
  switch (type) {
    case 'increment': //如果是加
      return preState + data
    case 'decrement': //若果是减
      return preState - data
    default:
      return preState
  }
}

Count 组件中

//引入store，用于获取redux中保存状态
import store from '../../redux/store'

  //加法
  increment = ()=>{
    const {value} = this.selectNumber
    store.dispatch({type:'increment',data:value*1})
  }
  
  <h1>当前求和为：{store.getState()}</h1>

数据更新后需要手动 render。
在组件中写：

componentDidMount(){
  // 检测redux中状态的变化，只要变化，就调用render
  store.subscribe(()=>{
    this.setState({})
  })
} 

或者在项目入口文件中写：

ReactDOM.render(<App/>,document.getElementById('root'))

store.subscribe(()=>{
  ReactDOM.render(<App/>,document.getElementById('root'))
})

总结

1. 去除Count组件自身的状态

2. src下建立:

   -redux
     -store.js
     -count_reducer.js
   

3. store.js：

   1. 引入redux中的createStore函数，创建一个store
   2. createStore调用时要传入一个为其服务的reducer
   3. 记得暴露store对象

4. count_reducer.js：

   1. reducer的本质是一个函数，接收：preState,action，返回加工后的状态
   2. reducer有两个作用：初始化状态，加工状态
   3. reducer被第一次调用时，是store自动触发的，
      传递的preState是undefined,
      传递的action是:{type:'@@REDUX/INIT_a.2.b.4}

5. 在index.js中监测store中状态的改变，一旦发生改变重新渲染
   备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

redux 完整版

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

count_action.js

// 该文件专门为Count组件生成action对象
import {INCREMENT,DECREMENT} from './constant'

export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})

constant.js

// 该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

Count 组件中写法改为

import {createIncrementAction,createDecrementAction} from '../../redux/count_action'

  //加法
  increment = ()=>{
    const {value} = this.selectNumber
    store.dispatch(createIncrementAction(value*1))
  }

异步 action 版

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

代码示例：

// store.js
import {createStore, applyMiddleware} from 'redux'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
export default createStore(countReducer,applyMiddleware(thunk))

// count_action.js
//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {
  return (dispatch)=>{
    setTimeout(()=>{
      dispatch(createIncrementAction(data))
    },time)
  }
}

// Count 组件
  //异步加
  incrementAsync = ()=>{
    const {value} = this.selectNumber
    // setTimeout(()=>{
      store.dispatch(createIncrementAsyncAction(value*1,500))
    // },500)
  }

对 react-redux 的理解

react-redux 是 react 推出的，让用户能够更方便地在 react 中使用 redux。

连接容器组件与UI组件

// containers/Count/index.jsx
// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
// 使用connect()()创建并暴露一个Count的容器组件
export default connect()(CountUI)

// App.jsx
import Count from './containers/Count'
import store from './redux/store'

  {/* 给容器组件传递store */}
  <Count store={store} />

react-redux 的基本使用

containers/Count/index.js

/* 
  1.mapStateToProps函数返回的是一个对象；
  2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
  3.mapStateToProps用于传递状态
*/
function mapStateToProps(state){
  return {count:state}
}

/* 
  1.mapDispatchToProps函数返回的是一个对象；
  2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
  3.mapDispatchToProps用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch){
  return {
    jia:number => dispatch(createIncrementAction(number)),
    jian:number => dispatch(createDecrementAction(number)),
    jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
  }
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

components/Count/index.js

//加法
increment = ()=>{
  const {value} = this.selectNumber
  this.props.jia(value*1)
}

<h1>当前求和为：{this.props.count}</h1>

总结：

1. 明确两个概念：
   1. UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。
   2. 容器组件：负责和redux通信，将结果交给UI组件。
2. 如何创建一个容器组件————靠react-redux 的 connect函数

   connect(mapStateToProps,mapDispatchToProps)(UI组件)
     -mapStateToProps:映射状态，返回值是一个对象
     -mapDispatchToProps:映射操作状态的方法，返回值是一个对象
   

3. 备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
4. 备注2：mapDispatchToProps，也可以是一个对象

感受：这哪简单了，又加了一层套子，代码写得更多了，一个功能的代码分散在更多的文件里。容器组件屁事没做，又包了一层函数。

优化1：简写 mapDispatch

export default connect(
  state => ({count:state}),

  //mapDispatchToProps的一般写法
  /* dispatch => ({
    jia:number => dispatch(createIncrementAction(number)),
    jian:number => dispatch(createDecrementAction(number)),
    jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
  }) */

  //mapDispatchToProps的简写
  {
    jia: createIncrementAction,
    jian: createDecrementAction,
    jiaAsync: createIncrementAsyncAction,
  }
)(Count)

只需给出 xxxAction，react-redux 会帮你执行 dispatch(xxxAction)。

优化2：Provider组件的使用

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

// 以下代码不用写了
store.subscribe(()=>{
  ReactDOM.render(<App/>,document.getElementById('root'))
})

无需自己给容器组件传递store，给<App/>包裹一个<Provider store={store}>即可。

// index.js
import {Provider} from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
)

优化3：整合UI组件与容器组件

就是直接把 UI 组件的代码复制到容器组件中。

优化总结

1. 容器组件和UI组件整合一个文件
2. 无需自己给容器组件传递store，给包裹一个<Provider store={store}>即可。
3. 使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。
4. mapDispatchToProps也可以简单的写成一个对象
5. 一个组件要和redux“打交道”要经过哪几步？
   1. 定义好UI组件---不暴露
   2. 引入connect生成一个容器组件，并暴露，写法如下：

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

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

react-redux 数据共享版

import {createStore,applyMiddleware,combineReducers} from 'redux'

//汇总所有的reducer变为一个总的reducer
const allReducer = combineReducers({
  he: countReducer,
  rens: personReducer,
})

export default createStore(allReducer,applyMiddleware(thunk))

(奇葩，用了 react-redux 还是一坨 shit。一堆反直觉的用法，自寻烦恼。)

同步操作可以不经过 action 封装，直接 dispatch 一个对象。异步操作的业务逻辑也不一定要写在 action 中，可以写在组件里。
state 的值在 reducer 中。
createStore() 需要传入 reducers，而不需要 actions。后者只用于生成对象，或者函数，和 store 并没有必然联系。

纯函数

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

reducers 中的操作不能在原对象上修改并返回，因为 redux 源码中不会检查对象的这种变化，必须新生成一个对象返回。

react-redux开发者工具

1. 安装浏览器插件 Redux Devtools
2. yarn add redux-devtools-extension
3. store中进行配置

import {composeWithDevTools} from 'redux-devtools-extension'
const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))