一. `js`的纯函数

1.理解`js`纯函数

函数式编程中有一个非常重要的概念叫纯函数，js符合函数式编程的范式，所以也有纯函数的概念
- 在react开发中纯函数是被多次提及的
- 比如**react中组件就被要求像是一个纯函数**（为什么是像，因为还有class组件）
- redux中有一个reducer的概念，也是要求必须是一个纯函数
- 所以掌握纯函数对于理解很多框架的设计是非常有帮助的
纯函数的维基百科定义：
- 在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数
- 此函数在相同的输入值时，需产生相同的输出
- 函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关
- 该函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出，或更改输出值以外物件的内容等
总结：
- 确定的输入，一定会产生确定的输出
- 函数在执行过程中，不能产生副作用

2.副作用概念的理解

那么这里又有一个概念，叫做副作用，什么又是副作用呢？
- 副作用（side effect）其实本身是医学的一个概念，比如我们经常说吃什么药本来是为了治病，可能会产生一些其他的副作用
- 在计算机科学中，也引用了副作用的概念，表示在执行一个函数时，除了返回函数值之外，还对调用函数产生了附加的影响，比如修改了全局变量，修改参数或者改变外部的存储
纯函数在执行的过程中就是不能产生这样的副作用：
- 副作用往往是产生bug的 “温床”

3.纯函数的案例

我们来看一个对数组操作的两个函数：
- slice：slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组
- splice：splice截取数组, 会返回一个新的数组, 也会对原数组进行修改
slice就是一个纯函数，不会修改数组本身，而splice函数不是一个纯函数

4.判断下面函数是否是纯函数？

5.纯函数的作用和优势

为什么纯函数在函数式编程中非常重要呢？
- 因为你可以安心的编写和安心的使用
- 你在写的时候保证了函数的纯度，只是单纯实现自己的业务逻辑即可，不需要关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改
- 你在用的时候，你确定你的输入内容不会被任意篡改，并且自己确定的输入，一定会有确定的输出
React中就要求我们无论是函数还是class声明一个组件，这个组件都必须像纯函数一样，保护它们的props不被修改：
在redux中，reducer也被要求是一个纯函数

二. `Redux`的核心思想

1.为什么需要`redux`

js开发的应用程序，已经变得越来越复杂了：
- js需要管理的状态越来越多，越来越复杂
- 这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页
管理不断变化的state是非常困难的：
- 状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化
- 当应用程序复杂时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪
React是在视图层帮助我们解决了DOM的渲染过程，但是State依然是留给我们自己来管理：
- 无论是组件定义自己的state，还是组件之间的通信通过props进行传递；也包括通过Context进行数据之间的共享
- React主要负责帮助我们管理视图，state如何维护最终还是我们自己来决定
Redux就是一个帮助我们管理State的容器：Redux是js的状态容器，提供了可预测的状态管理
Redux除了和React一起使用之外，它也可以和其他界面库一起来使用（比如Vue），并且它非常小（包括依赖在内，只有2kb）

2. Redux的核心理念 - Store

Redux的核心理念非常简单
比如我们有一个朋友列表需要管理：
- 如果我们没有定义统一的规范来操作这段数据，那么整个数据的变化就是无法跟踪的
- 比如页面的某处通过products.push的方式增加了一条数据
- 比如另一个页面通过products[0].age = 25修改了一条数据
整个应用程序错综复杂，当出现bug时，很难跟踪到底哪里发生的变化

3. Redux的核心理念 - action

Redux要求我们通过action来更新数据：
- 所有数据的变化，必须通过派发（dispatch）action来更新
- action是一个普通的js对象，用来描述这次更新的type和content
- 默认情况下，store.dispatch只能派发普通的对象类型的action，想要派发别的类型，需依赖中间件，如：redux-thunk
比如下面就是几个更新friends的action：
- 强制使用action的好处是可以清晰的知道数据到底发生了什么样的变化，所有的数据变化都是可跟追、可预测的
- 当然，目前我们的action是固定的对象
- 真实应用中，我们会通过函数来定义，返回一个action

4. Redux的核心理念 - reducer

但是如何将state和action联系在一起呢？答案就是reducer
- reducer是一个纯函数
- reducer做的事情就是将传入的state和action结合起来生成一个新的state
- reducer函数传入的state，不能直接对其进行修改，必须进行拷贝，然后返回一个新的对象进行更新

5. Redux的三大原则

单一数据源
- 整个应用程序的state被存储在一颗object tree中，并且这个object tree只存储在一个store中
- Redux并没有强制让我们不能创建多个Store，但是那样做并不利于数据的维护
- 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改
State是只读的
- 唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State
- 这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改state
- 这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition（竞态）的问题
- 竞态：无法保证任务完成的顺序
使用纯函数来执行修改
- 通过reducer将旧state和 actions联系在一起，并且返回一个新的State
- 随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分
- 但是所有的reducer都应该是纯函数，不能产生任何的副作用

三. `React`结合`Redux`

1. Redux测试项目搭建

安装redux：

shell

npm i redux --save
yarn add redux

创建一个新的项目文件夹：learn-redux

shell

// 执行初始化操作
npm init
yarn init

创建src目录，并且创建index.js文件
修改package.json可以直接通过node执行index.js

json

"scripts": {
  "start": "node src/index.js"
}

2. Redux的使用过程

创建一个对象，作为我们要保存的状态：
创建Store来存储这个state
- 创建store时必须创建reducer
- 我们可以通过store.getState()来获取当前的state
通过action来修改state
- 通过dispatch来派发action
- 通常action中都会有type属性，也可以携带其他的数据
修改reducer中的处理代码
- 这里一定要记住，reducer是一个纯函数，不需要直接修改state
- 直接修改state会带来一些问题
可以在派发action之前，监听store的变化

具体代码演示:

 <img src="./assets/image-20220922203214623.png" alt="image-20220922203214623" style="zoom:80%;" /><img src="./assets/image-20220922203134644-17303856842741.png" alt="image-20220922203134644" style="zoom:80%;" />	

 <img src="./assets/image-20220922203155649.png" alt="image-20220922203155649" style="zoom:80%;" />		<img src="./assets/image-20220922203145257.png" alt="image-20220922203145257" style="zoom:80%;" />

3. Redux结构划分

如果我们将所有的逻辑代码写到一起，那么当redux变得复杂时代码就难以维护
- 我们可以对代码进行拆分，将store、reducer、action、constants拆分成一个个文件
- 创建store/index.js文件
- 创建store/reducer.js文件
- 创建store/actionCreators.js文件
- 创建store/constants.js文件
注意：node中对ES6模块化的支持
- 目前我使用的node版本是v12.16.1，从node v13.2.0开始，node才对ES6模块化提供了支持
- node v13.2.0之前，需要进行如下操作：
  - 在package.json中添加属性： "type": "module"
  - 在执行命令中添加如下选项：node --experimental-modules src/index.js
- node v13.2.0之后，只需要进行如下操作
  - 在package.json中添加属性： "type": "module"
注意：导入文件时，需要跟上.js后缀名

4. Redux使用流程

我们已经知道了redux的基本使用过程，那么我们就更加清晰来认识一下redux在实际开发中的流程：

5. Redux官方图

6. redux融入react代码

目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去
这里我创建了两个组件：
- Home组件：其中会展示当前的counter值，并且有一个+1和+5的按钮
- Profile组件：其中会展示当前的counter值，并且有一个-1和-5的按钮
核心代码主要是两个：在componentDidMount中定义数据的变化，当数据发生变化时重新设置 counter
- 在发生点击事件时，调用store的dispatch来派发对应的action

7. react-redux使用

开始之前需要强调一下，redux和react没有直接的关系，你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux
尽管这样说，redux依然是和React库结合的更好，因为他们是通过state函数来描述界面的状态，Redux可以发射状态的更新，让他们作出响应
虽然我们之前已经实现了connect、Provider这些帮助我们完成连接redux、react的辅助工具，但是实际上redux官方帮助我们提供了react-redux的库，可以直接在项目中使用，并且实现的逻辑会更加的严谨和高效
安装react-redux:
shell
```
npm i react-redux
yarn add react-redux
```
react-redux中的Provider组件内部使用的Context，而传入的store属性，内部还是用的value，只不过是做了封装
react-redux提供了一个connect函数可以从redux store中读取到值（并在store 更新时，重新读取值）
connect函数内部实现原理：高阶函数+高阶组件
- connect接收两个可选参数
  - mapStateToProps：每次store发生改变时，会调用，它接收整个store的state，并且应该返回组件所需的数据对象
  - mapDispatchToProps：可以是一个函数或一个对象
    - 如果是函数，它将在组件创建时调用一次，接收dispatch作为参数，并且应该返回一个对象，其中包含使用dispatch来调度action的函数
    - 如果是一个具有action creators的对象，每个action creator都将变成一个prop函数，在调用时会自动调度其action

8. react-redux源码导读

8. 组件中异步操作

在之前简单的案例中，redux中保存的counter是一个本地定义的数据
- 我们可以直接通过同步的操作来dispatch action，state就会被立即更新
- 但是真实开发中，redux中保存的很多数据可能来自服务器，我们需要进行异步的请求，再将数据保存到redux中
网络请求可以在class组件的componentDidMount中发送，所以我们可以有这样的结构：

9. redux中的异步操作

上面的结构有一个缺陷：
- 我们必须将网络请求的异步代码放到组件的生命周期中来完成
- 事实上，网络请求到的数据也属于我们状态管理的一部分，更好的一种方式应该是将其也交给redux来管理
但是在redux中如何可以进行异步的操作呢？
- 答案就是使用中间件（Middleware）
- 在Express或Koa这类框架中，Middleware可以帮助我们在请求和响应之间嵌入一些操作的代码，比如cookie解析、日志记录、文件压缩等操作

10. 理解中间件

redux也引入了中间件（Middleware）的概念：
- 这个中间件的目的是在dispatch的action和最终达到的reducer之间，扩展一些自己的代码
- 比如日志记录、调用异步接口、添加代码调试功能等等
我们现在要做的事情就是发送异步的网络请求，所以我们可以添加对应的中间件：
- 这里官网推荐的、包括演示的网络请求的中间件是使用 redux-thunk
redux-thunk是如何做到让我们可以发送异步的请求呢？
- 我们知道，默认情况下的dispatch(action)，action需要是一个普通的js对象
- redux-thunk可以让dispatch(action函数)，action可以是一个函数
- 该函数会被调用，并且会传给这个函数一个dispatch函数和getState函数
  - dispatch函数用于我们之后再次派发action
  - getState函数考虑到我们之后的一些操作需要依赖原来的状态，用于让我们可以获取之前的一些状态

11. 如何使用redux-thunk

安装redux-thunk
shell
```
yarn add redux-thunk
npm i redux-thunk
```
在创建store时传入应用了middleware的enhance函数
- 通过applyMiddleware来结合多个Middleware, 返回一个enhancer
- 将enhancer作为第二个参数传入到createStore中
  react
```
import { createStore, applyMiddleware } from "redux"
import thunk from "redux-thunk"

const store = createStore(reducer, applyMiddleware(thunk))
```

定义返回一个函数的action：

注意：这里不是返回一个对象了，而是一个函数

该函数在dispatch之后会被执行

react

export const fetchHomeMultidataAction = () => {
  // 如果是一个普通的action, 那么我们这里需要返回action对象
  // 问题: 对象中是不能直接拿到从服务器请求的异步数据的
  // return {}

  return function(dispatch, getState) {
    // 异步操作: 网络请求
    // console.log("foo function execution-----", getState().counter)
    axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
      const banners = res.data.data.banner.list
      const recommends = res.data.data.recommend.list

      // dispatch({ type: actionTypes.CHANGE_BANNERS, banners })
      // dispatch({ type: actionTypes.CHANGE_RECOMMENDS, recommends })
      dispatch(changeBannersAction(banners))
      dispatch(changeRecommendsAction(recommends))
    })
  }

  // 默认情况下，如果返回的是一个函数, 那么redux是不支持的
  // return foo
}

四 . `Connect`函数

TIP

connect 仍然有效，并且在React-Redux 8.x中受支持。但是，官方建议使用hooks API作为默认值

Overview

connect() 函数将React组件连接到 Redux store
它向其连接的组件提供它需要从store中获取的数据片段，以及它可以用来向store派发action的函数
它不会修改传递给它的组件类；相反，它返回一个新的连接组件类，该组件类包装了传入的组件
js
```
	function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)
```
mapStateToProps和mapDispatchToProps分别处理redux store的state和dispatch，state和dispatch将作为第一个参数提供给mapStateToProps或mapDsipatchToProps函数
mapStateToProps和mapDispatchToProps的返回值在内部分别称为stateProps和dispatchProps，如果已经定义，它们将作为第一个和第二个参数提供给mergeProps，其中第三个参数将是ownProps，组合的结果，通常称为mergeProps，然后将提供给您连接的组件

connect() Parameters

connect 接受四个不同的参数，都是可选的。按照惯例（约定），它们被称为：
1. mapStateToProps?: Function
2. mapDispatchToProps?: Function | Object
3. mergeProps?: Function
4. options?: Object

mapStateToProps?: (state, ownProps?) => Object

如果指定了mapStateToProps函数，新的包装器组件将订阅 Redux store更新。这意味着无论何时更新 store，都会调用 mapStateToProps。 mapStateToProps 的结果必须是一个普通对象，它将被合并到被包装组件的props中。如果您不想订阅store更新，请传递null或undefined代替 mapStateToProps
Parameters
1. state: Object
2. ownProps?: Object
mapStateToProps 函数最多接受两个参数。声明的函数参数（又名 arity）的数量会影响它何时被调用。这也决定了函数是否会收到 ownProps。请参阅此处的注释：https://react-redux.js.org/api/connect#the-arity-of-maptoprops-functions
state
- 如果mapStateToProps函数声明为接收一个参数，则每当store state更改时都会调用mapStateToProps，并将store state作为唯一参数
  js
```
	const mapStateToProps = (state) => ({ 
        todos: state.todos
    })
```
ownProps
- 如果mapStateToProps 函数声明为接收两个参数，则每当store state更改或包装器组件接收到new props时（基于浅层等比较）都会调用它。它将store state作为第一个参数，包装组件的props作为第二个参数
- 第二个参数通常按约定称为 ownProps
  js
```
	const mapStateToProps = (state, ownProps) => ({
        todo: state.todos[ownProps.id],
    })
```
Returns
- mapStateToProps 函数应返回一个对象。这个对象，通常称为 stateProps，返回对象将作为props合并到连接组件。如果你定义了mergeProps，它将作为第一个参数提供给mergeProps
- mapStateToProps 的返回决定了连接的组件是否会重新渲染（详见这里https://react-redux.js.org/using-react-redux/connect-mapstate#return-values-determine-if-your-component-re-renders）
有关推荐使用mapStateToProps的更多详细信息，请参阅mapStateToProps使用指南https://react-redux.js.org/using-react-redux/connect-mapstate
您可以将mapStateToProps 和mapDispatchToProps定义为工厂函数，即返回一个函数而不是一个对象。在这种情况下，返回的函数将被视为真正的mapStateToProps或 mapDispatchToProps，并在后续调用中被调用。您可能会看到有关工厂函数的说明或我们的性能优化指南

mapDispatchToProps?: Object | (dispatch, ownProps?) => Object

通常称为 mapDispatchToProps，connect() 的第二个参数可以是对象、函数或未提供

默认情况下，您的组件将接收dispatch，即，当您不向connect()提供第二个参数时

react

// do not pass `mapDispatchToProps`
connect()(MyComponent)
connect(mapState)(MyComponent)
connect(mapState, null, mergeProps, options)(MyComponent)

如果你将mapDispatchToProps定义为一个函数，它将被调用及最多两个参数
Parameters
1. dispatch: Function
2. ownProps?: Object

dispatch

如果mapDispatchToProps 被声明为带有一个参数的函数，store的dispatch将分配给该dispatch参数

react

const mapDispatchToProps = (dispatch) => {
  return {
    // dispatching plain actions
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    reset: () => dispatch({ type: 'RESET' }),
  }
}

ownProps
- 如果mapDispatchToProps函数被声明为带两个参数，它将以dispatch 作为第一个参数调用，并将传递给包装组件的props作为第二个参数，并且每当连接的组件接收到新的props时都会重新调用
- 第二个参数通常按约定称为 ownProps
  react
```
// binds on component re-rendering
<button onClick={() => this.props.toggleTodo(this.props.todoId)} />

// binds on `props` change
const mapDispatchToProps = (dispatch, ownProps) => ({
  toggleTodo: () => dispatch(toggleTodo(ownProps.todoId)),
})
```
- mapDispatchToProps 的声明函数参数的数量决定了它们是否接收到 ownProps。在此处查看注释https://react-redux.js.org/api/connect#the-arity-of-maptoprops-functions
returns
- mapDispatchToProps 函数应返回一个对象。对象的每个字段都应该是一个函数，调用它应该将一个action dispatch到store
- mapDispatchToProps 函数的返回被视为 dispatchProps。返回值将作为props合并到您的连接组件。如果你定义了mergeProps，它将作为第二个参数提供给 mergeProps
  react
```
const createMyAction = () => ({ type: 'MY_ACTION' })
const mapDispatchToProps = (dispatch, ownProps) => {
  const boundActions = bindActionCreators({ createMyAction }, dispatch)
  return {
    dispatchPlainObject: () => dispatch({ type: 'MY_ACTION' }),
    dispatchActionCreatedByActionCreator: ()=> dispatch(createMyAction()),
    ...boundActions,
    // you may return dispatch here
    dispatch,
  }
}
```
- 有关推荐用法的更多详细信息，请参阅mapDispatchToProps使用指南https://react-redux.js.org/using-react-redux/connect-mapdispatch
- 您可以将mapStateToProps 和mapDispatchToProps定义为工厂函数，即返回一个函数而不是一个对象。在这种情况下，您返回的函数将被视为真正的mapStateToProps或 mapDispatchToProps，并在后续调用中被调用。您可能会看到有关工厂函数的说明或我们的性能优化指南。

Object Shorthand Form

mapDispatchToProps 可能是一个对象，其中每个字段都是一个action creator

react

import { addTodo, deleteTodo, toggleTodo } from './actionCreators'

const mapDispatchToProps = {
  addTodo,
  deleteTodo,
  toggleTodo,
}

export default connect(null, mapDispatchToProps)(TodoApp)

connect() returns

connect() 的返回是一个包装器函数，它接受您的组件并返回一个包装器组件以及它注入的附加props

react

import { login, logout } from './actionCreators'

const mapState = (state) => state.user
const mapDispatch = { login, logout }

// first call: returns a hoc that you can use to wrap any component 
// 第一次调用：返回一个可用于包装任意组件的hoc（高阶组件）
const connectUser = connect(mapState, mapDispatch)

// second call: returns the wrapper component with mergedProps 
// 第二次调用：返回带有mergedProps的包装器组件
// you may use the hoc to enable different components to get the same behavior 
// 您可以使用该hoc使不同的组件获得相同的行为
const ConnectedUserLogin = connectUser(Login)
const ConnectedUserProfile = connectUser(Profile)

在大多数情况下，包装器函数会立即被调用，而不会被保存在临时变量中

react

import { login, logout } from './actionCreators'

const mapState = (state) => state.user
const mapDispatch = { login, logout }

// call connect to generate the wrapper function, and immediately call
// 调用connect来生成包装器函数，并立即调用
// the wrapper function to generate the final wrapper component.
// 用于生成最终包装器组件的包装器函数
export default connect(mapState, mapDispatch)(Login)

五. `Redux DevTools`

redux可以方便的让我们对状态进行跟踪和调试，那么如何做到呢？
- redux官网为我们提供了Redux DevTools的工具
- 利用这个工具，我们可以知道每次状态是如何被修改的，修改前后的状态变化等等

安装该工具需要两步：

第一步：在对应的浏览器中安装相关的插件（比如Chrome浏览器扩展商店中搜索Redux DevTools即可）
第二步：Redux DevTools工具默认是没有打开的，所以需要在redux中继承devtools的中间件

react

import { createStore, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk"
import reducer from "./reducer"

// 正常情况下 store.dispatch(object)
// 想要派发函数 store.dispatch(function)

// redux-devtools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)))

export default store

如果浏览器没有安装Redux DevTools工具，是获取不到window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__的
如果获取不到，就可以使用redux中默认提供的组合函数compose，而使用compose，控制台中redux中是看不到任何东西的
所以开发环境中，可以开启Redux DevTools工具进行调试
生成环境中，移除window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__即可
js
```
const composeEnhancers = compose;
```
控制台中的Trace选项是可以跟踪代码在何处执行的(调用栈)，默认是没有开启，开启的话需要：
js
```
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({trace: true}) || compose;
```
注意：是两个下划线

六. `reducer`的模块拆分

1. Reducer代码拆分

我们先来理解一下，为什么这个函数叫reducer？
我们来看一下目前我们的reducer：
- 当前这个reducer既有处理counter的代码，又有处理home页面的数据
- 后续counter相关的状态或home相关的状态会进一步变得更加复杂
- 我们也会继续添加其他的相关状态，比如购物车、分类、歌单等等
- 如果将所有的状态都放到一个reducer中进行管理，随着项目的日趋庞大，必然会造成代码臃肿、难以维护
因此，我们可以对reducer进行拆分：
- 我们先抽取一个对counter处理的reducer
- 再抽取一个对home处理的reducer
- 将它们合并起来

2. Reducer文件拆分

目前我们已经将不同的状态处理拆分到不同的reducer中，我们来思考：
- 虽然已经放到不同的函数了，但是这些函数的处理依然是在同一个文件中，代码非常的混乱
- 另外关于reducer中用到的constant、action等我们也依然是在同一个文件中

3. combineReducers函数

目前我们合并的方式是通过每次调用reducer函数自己来返回一个新的对象
事实上，redux给我们提供了一个combineReducers函数可以方便的让我们对多个reducer进行合并：
那么combineReducers是如何实现的呢？
- 事实上，它也是将我们传入的reducers合并到一个对象中，最终返回一个combination的函数（相当于我们之前的reducer函数了）
- 在执行combination函数的过程中，它会通过判断前后返回的数据是否相同来决定返回之前的state还是新的state
- 新的state会触发订阅者发生对应的刷新，而旧的state可以有效的阻止订阅者发生刷新

获取state的时候，需要根据combindReducers所传入的对象的key来获取

react

const counter = store.getState().counter
const mapStateToProps = state => ({
  counter: state.counter
})
// 转化为下面的代码
const counter = store.getState().counterInfo.counter
const mapStateToProps = state => ({
  counter: state.counterInfo.counter
})

可以查看源码来学习

一. js的纯函数 ​

1.理解js纯函数 ​

2.副作用概念的理解 ​

3.纯函数的案例 ​

4.判断下面函数是否是纯函数？ ​

5.纯函数的作用和优势 ​

二. Redux的核心思想 ​

1.为什么需要redux ​

2. Redux的核心理念 - Store ​

3. Redux的核心理念 - action ​

4. Redux的核心理念 - reducer ​

5. Redux的三大原则 ​

三. React结合Redux ​

1. Redux测试项目搭建 ​

2. Redux的使用过程 ​

3. Redux结构划分 ​

4. Redux使用流程 ​

5. Redux官方图 ​

6. redux融入react代码 ​

7. react-redux使用 ​

8. react-redux源码导读 ​

8. 组件中异步操作 ​

9. redux中的异步操作 ​

10. 理解中间件 ​

11. 如何使用redux-thunk ​

四 . Connect函数 ​

TIP ​

Overview ​

connect() Parameters ​

mapStateToProps?: (state, ownProps?) => Object ​

mapDispatchToProps?: Object | (dispatch, ownProps?) => Object ​

connect() returns ​

五. Redux DevTools ​

六. reducer的模块拆分 ​

1. Reducer代码拆分 ​

2. Reducer文件拆分 ​

3. combineReducers函数 ​

一. `js`的纯函数

1.理解`js`纯函数

2.副作用概念的理解

3.纯函数的案例

4.判断下面函数是否是纯函数？

5.纯函数的作用和优势

二. `Redux`的核心思想

1.为什么需要`redux`

2. Redux的核心理念 - Store

3. Redux的核心理念 - action

4. Redux的核心理念 - reducer

5. Redux的三大原则

三. `React`结合`Redux`

1. Redux测试项目搭建

2. Redux的使用过程

3. Redux结构划分

4. Redux使用流程

5. Redux官方图

6. redux融入react代码

7. react-redux使用

8. react-redux源码导读

8. 组件中异步操作

9. redux中的异步操作

10. 理解中间件

11. 如何使用redux-thunk

四 . `Connect`函数

TIP

Overview

connect() Parameters

mapStateToProps?: (state, ownProps?) => Object

mapDispatchToProps?: Object | (dispatch, ownProps?) => Object

connect() returns

五. `Redux DevTools`

六. `reducer`的模块拆分

1. Reducer代码拆分

2. Reducer文件拆分

3. combineReducers函数