本文主要讲述的是Redux在React中的最佳实践。

前言

在阅读本文之前,我想我们都需要先明白这句话:“如果你不知道是否需要 Redux,那就是不需要它。”

点此直接阅读正文.

什么是Redux

为什么需要Redux

在进入实践之前,首先需要知道什么时候才需要使用Redux。等价来说:Redux能解决什么问题?

其实无论你看多少关于“是否应该在项目中引入Redux”的讨论,最终得到的结论(Redux能解决的问题)无非是以下两点:

  1. 保存在不同组件中需要共享的数据;

在React中是如何来解决这个问题的呢?以兄弟组件通信为例:一般都是子组件使用父组件传入的props回调将数据传给父组件,父组件修改其自身state值后,再由父组件将数据传给其他的子组件。这样才实现了兄弟组件的数据通信。

但是引入Redux后,可以将这一步骤简化:子组件直接修改存储在store中的数据,然后store将数据同步到其他组件中,节省了从子组件传递数据到父组件这一步骤。

  1. 减少数据传递的层级;

我们知道在没有引入Redux之前,React组件之间的数据通信大都是通过props传递的,如果应用一个数据的组件所在层级比较深,那么其上层组件需要将数据一级一级传递,直至传递给该组件。

在引入Redux之后,父组件直接将数据存储到store中,而需要该数据的组件直接去store中去取就好了,不需要通过props层层传递了。


问一个有趣的问题:如果刷新了一下页面,Redux中存的数据还会存在吗?


Redux的最佳实践

需要用到的库:

  • redux:
  • react-redux:
  • redux-thunk
  • redux-actions
  • redux-persist
  • immutable

参考

  1. Redux书写习惯.