「Redux」概念理解+实战上手（内含大量实例）

时间 2021-05-07

标签前端 vue react vuex redux 缓存性能优化微信 ide 函数栏目 React 繁體版

原文原文链接

前言

这篇文章零基础也能够看，我尽可能写得简单易懂了，若是以为理解起来有点费力，也能够先去官网入门。前端

这篇文章也附上了许多实战代码，可是因为篇幅缘由，一些实战例子我没有直接摆出来，而是放在了sandBox连接里，除了慢优势仍是不少的。vue

本篇文章由小狮子团队发布，微信公众号：小狮子前端，欢迎你们的关注，关注即有福利~

1、Redux因何产生？

首先说它为何出现react

1.趋势所致： JavaScript 单页应用开发日趋复杂，JavaScript 须要管理比任什么时候候都要多的 state （状态）。vuex

2.管理不断变化的 state 很是困难：若是一个 model 的变化会引发另外一个 model 变化，那么当 view 变化时，就可能引发对应 model 以及另外一个 model 的变化，依次地，可能会引发另外一个 view 的变化。state 在何时，因为什么缘由，如何变化已然不受控制。redux

2、Redux是干什么的？

说到底它也只是个工具，了解一个工具最开始固然是要了解它是作啥的咯。缓存

官网对它的定义：Redux 是 JavaScript 状态容器，提供可预测化的状态管理。性能优化

详细一些：微信

Redux会将整个应用状态(其实也就是数据)存储到Store
Store里面保存一棵状态树(state tree)
组件改变state的惟一方法是经过调用store的dispatch方法，触发一个action，这个action被对应的reducer处理，因而state完成更新
组件能够派发(dispatch)行为(action)给store,而不是直接通知其它组件
其它组件能够经过订阅store中的状态(state)来刷新本身的视图

能够结合这张图看：ide

3、Redux怎么用？

官网实例（todo）

State: 用了一个普通对象描述应用中的State，没有setter（修改器方法）函数

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

Action： 想更新state中的数据，例如增长todo，须要发起一个action。Action就是一个普通的JavaScript对象,描述发生了什么的指示器

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

强制使用 action 来描述全部变化带来的好处是能够清晰地知道应用中到底发生了什么。若是一些东西改变了，就能够知道为何变。

Reducer: 把 action 和 state 串起来，reducer 只是一个接收 state 和 action，并返回新的 state 的函数。

//编写不少小函数来分别管理 state 的一部分
function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

``````
//reducer 调用上两个 reducer，进而管理整个应用的 state
function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}

手写实战（TodoList）

感兴趣的能够看一下codesandbox-TodoList例子可能会比较慢。

没有用过sandbox的，我展现一下大概长这样：

我的以为这样比较直观一些，因此后面有的仍是贴的连接～
todo这种例子仍是比较简单的，至关于入门，理解Redux工做。

4、react-redux

能够看到上面咱们并无使用到react-redux，虽然能实现功能，但细心会发现我是直接拿的store，组件多的话个个拿store，这样很差。我来总结一下不用react-redux可能会遇到头痛的问题好比：

1.store并非那么显而易见，一旦组件层级变得更复杂，这个store就会变得很难控制。

2.逻辑组件看上去很乱，不清晰的缘由state和dispatch没有各自写在一块儿，重复代码有点多，不直观。

3.React 组件从 Redux store 中读取数据，向 store 中分发 actions 更新数据还不够方便。

Provider

这个仍是很好理解的，就是把store直接集成到React应用的顶层props里面Provider是把store注入到context，connect才是吧context转换成props，好处是，全部组件均可以在react-redux的控制之下，全部组件都能访问到Redux中的数据。

<Provider store={store}>
    <App />
 </Provider>,

connect

技术上讲，容器组件就是使用store.subscribe() 从 Redux state 树中读取部分数据，并经过 props 来把这些数据提供给要渲染的组件。
为啥要用它，简单来讲节省工做，没有他得手工开发容器组件，并为了性能而手动实现 React 性能优化建议中的 shouldComponentUpdate 方法。
使用 React Redux 库的 connect() 方法来生成，这个方法作了性能优化来避免不少没必要要的重复渲染。

connect的使用

代码以下：

const App = connect(mapStateToProps, mapDispatchToProps)(Counter);
export default App;

mapStateToProps

理解这个单词mapStateToProps：把state映射到props中去，state就是redux的state啦，props就是react的props咯。

代码：

// Map Redux state to component props
function mapStateToProps(state) {
  return {
    value: state.count
  }
}

而后在组件中使用this.props.value就能完成渲染

class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props;
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    );
  }
}
export default Counter;

mapDispatchToProps

理解这个单词mapDispatchToProps：map 各类dispatch 变成props。

// Map Redux actions to component props
 function mapDispatchToProps(dispatch) {
   return {
     onIncreaseClick: () => dispatch(increaseAction)
   }
 }

``````
class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props;
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    );
  }
}
export default Counter;

同理也是能够经过this.props.onIncreaseClick调用dispatch，这样就不须要在代码中运行dispatch了。

connect、provider应用实例

看了上面的介绍，应该能比较清楚的了解connect是干什么的了，而后也基本能明白怎么作了，但仍是没有写哥实例更清楚直白的了：

简单的点击增长count的实例，应该还有许多须要优化的地方，这里就学明白connect和provider就行了。

复杂一点的todolist的实例这里用了hooks、connect、provider没有用react-redux里的hooks钩子（若是有看不懂的话能够学学hooks或者等我有时间再出一个class改写成hooks的文章，仍是很简单的，只要你专心学）

5、Hooks下的redux

若是项目开发是用的hooks，那很好，你又省了许多力气，好比计数器这个这种简单的状态管理例子，几行代码解决。

import { useState } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

可是咱们能彻底不用redux状态管理了嘛？哈哈哈怎么可能呢

对于已经使用redux的：首先在redux没有给出对hooks较好支持以前，大多不会为了hooks来彻底重构项目吧，顺便一讲重构可能形成的问题：
- 失去不少connect()提供的自动引用缓存，可能致使性能问题，除非用大量的useCallback()来包裹
- 若是代码依赖于mapStateToProps中的ownProps，那么你可能会使用redux hooks编写更多代码，而不能直接拿到这个属性。
- 不能像之前那样在mapDispatchToProps中，为action creator提供依赖注入
对于有多是复杂应用的：许多公司的项目大部分都是用的redux管理状态，他的许多优势好比单一数据源、数据共享、事务状态、数据状态I/O和反作用隔离、状态回溯以及一系列辅助工具带来的强大调试能力等等，使得用redux来管理数据流成为更好的选择。
react-redux发布了新的版本，与以前的contextAPI分离，提供对hooks的支持，那这不就更香了

新的redux带来的改变

再也不须要使用 mapStateToProps，mapDispatchToProps和connect来维护单独的container组件和UI组件，而是在组件中直接使用redux提供的hooks,读取redux中的state。
能够将任何现有的自定义hooks与redux集成，而不是将经过hooks建立的state，做为参数传递给其余hooks。

redux对hooks的支持

首先介绍几个核心：

useSelector： 用于从Redux存储的state中提取值并订阅该state。
useDispatch： 除了读取store中的state，还能dispatch actions更新store中的state。
useStore： 用于获取建立的store实例。

光看简介还不是很清楚，一个个来讲：

useSelector

看它的介绍，就很像mapStateToProps，可是

不提供ownProps API，最好用useCallback或useMemo来获取
和useEffect同样，若是不提供第二个参数，每次组件更新就会从新计算

那可能会存在一些担心，会不会新的没有以前用的mapStateToProps好用呢？那来看看他的一些好处吧：

固然是配合hooks写代码更简洁
性能上延续redux之前的性能优化逻辑，比较props，若是当前的props跟老的props相同，则组件将不会从新渲染。
批处理更新，使得多个useSelector()从新计算出state，组件只会从新渲染一次，不用担忧useSelector重复渲染问题。

首先看看之前是怎么写的：

//before

// React component
class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props;
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    );
  }
}
export default Counter;

// Connected Component
// Map Redux state to component props
function mapStateToProps(state) {return {value: state.count}}
// Map Redux actions to component props
function mapDispatchToProps(dispatch) {return {onIncreaseClick: () => dispatch(increaseAction)}}

// Connected Component
const App = connect(mapStateToProps,mapDispatchToProps)(Counter)
export default App

而后让咱们用新的useSelect改写以前写得计数器：

//after
const Counter = props=> {
  const { count } = useSelector(
    (state) => ({
      count: state.count
    })
  );
  return (
    <div>
      <span>{count}</span>
    </div>
  );
}
export default Counter;

useDispatch

以前是使用mapDispatchToProps：

//before
// Map Redux actions to component props
  function mapDispatchToProps(dispatch) {
    return {
      onIncreaseClick: () => dispatch(increaseAction)
    }
  }

如今使用useDispatch，能够直接在组件中使用，以匿名函数形式：

//after
const dispatch = useDispatch();
return (
    <div>
      <button onClick={()=>dispatch(increaseAction)}>Increase</button>
    </div>
  );

因为匿名函数的性质，每次从新渲染得到新的引用，若是做为props传递给子组件，那么子组件每次都要从新渲染。

优化的意见是在useCallback中建立这个匿名函数：

//after
import React, { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import increaseAction from "./store/action";
const Counter = props=> {
  const { count } = useSelector(
    (state) => ({
      count: state.count
    })
  );
  const dispatch = useDispatch();
  const onIncreaseClick = useCallback(
    () => dispatch(increaseAction),[dispatch]
  );
  return (
    <div>
      <span>{count}</span>
      <button onClick={onIncreaseClick}>Increase</button>
    </div>
  );
}
export default Counter;

useStore

在任何须要访问store的应用中，均可以经过usestore来获取。若是出于某种缘由，好比说单元测试时，想要获取不一样的store，咱们能够将store经过新的contextAPI传递进组件树中，就像下面这样：

import React from 'react';
import { useStore } from 'react-redux';
import OtherProvider from './OtherProvider';

const Component = props => {
  const store = useStore();
  return <OtherProvider store={store}>{props.children}</OtherProvider>
}

实战

接着上面已经改为hooks的todolist可是仍是用的connect的实例，来从新用react-redux的useSelector和useDispatch实现。

基本思想前面介绍的差很少来，这里我就不败代码，为了更直观仍是用sandbox虽然不是很快：

SandBox ------ useSelector、useDispatch实战TodoList

Hooks下的redux总结

为何仍是要用redux？
简单来讲：Redux 提供了应对大型应用的代码组织和调试能力，在程序出错时，能帮你快速定位问题。

对于一些场景的需求hooks无法解决：

须要保存或者加载状态
跨组件共享状态
须要与其余组件共享业务逻辑或数据处理过程

配合hooks新的redux带来的不同的改变：经过使用useSelector、useDispatch和useStore搭配这hooks写确实也是个不错的尝试。

总结

做为一个以前vue技术栈转react技术栈的菜鸟来讲，仍是踩了一些的坑的：
好比在有了vuex的基础以后，而后有没有理解清楚理解redux，很容易以为他两差很少，但实际仍是有挺多区别的，也是我深刻学习redux的一个导火索。

简单的说一下：
在 Vuex 中，$store 被直接注入到了组件实例中，所以能够比较灵活的使用：

使用 dispatch 和 commit 提交更新
经过 mapState 或者直接经过 this.$store 来读取数据
组件中既能够 dispatch action 也能够 commit updates

在 Redux 中：

咱们每个组件都须要显示的用 connect 把须要的 props 和 dispatch 链接起来。
Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。
从实现原理上来讲，最大的区别是两点：

Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改。

Redux 在检测数据变化的时候，是经过 diff 的方式比较差别的，而Vuex其实和Vue的原理同样，是经过 getter/setter来比较的。

挖坑

🚀🚀 后续可能大几率还会更新这篇文章，还有些没写到，但愿这篇文章对于你学习redux有所帮助哦～

⭐️⭐️ 若是以为不错的话，点个赞再走吧 ❤️ ❤️ ～～