React中间件个人的一些笔记

1.纯函数

纯函数:相同的输入总是得到相同的输出.

原则: a.不得改写参数;

b.不得调用 Date.now()或者Math.random()等不纯的方法,因为每次回得到不一样的结果.

c.不能使用全局变量.

reducer必须是一个纯函数:

纯函数主要的含义是他不可以修改影响输入值.

没有副作用.副作用指的是:例如在函数中一些异步调用或者会影响函数作用域之外的变量一类的操作.

2.redux中间件

(1)中间件的理解

中间件:middleware.用来在不损害原功能的情况下,引入额外的代码来拓展功能.

(2)React中间件

中间:在dispatch action和到达reducer之间.

没有中间件:

diapatch(action)=>reducer,用来发起状态更新.

使用中间件:

diapatch(action)=>执行中间件代码=>reducer.

diapatch()就是中间件封装处理后的diapatch,但是,最终一定会调用Redux库自己提供的diapatch方法.

(3)问题

问题:获取数据时,如何发ajax拿数据,并保存到redux中?

1.方案1.在业务组件中发请求,拿到数据时候,再dispatch .

2.方案2.在业务组件中直接dispatch ,在dispatch 中发送请求,然后保存redux .

3.redux中间件redux-thunk

(1)作用

redux-thunk中间件允许redux处理函数形式的action,在函数形式的action中就可以执行异步操作代码,完成异步操作.

之前:

const action={type:'todo/add',payload:'学习redux'}
dispatch (action)

之后:

const action1=async()=>{
const res=await 异步动作()
dispatch ({type:'todo/add',payload:'学习redux'})
}
dispatch(action1)

(2)使用步骤

1.安装:npm i redux-thunk;

2.使用:在store/index.js中:

a.导入 redux-thunk,applyMiddleware

import {createStore,applyMiddleware} from 'react-redux'
import thunk from 'redux-thunk'

b.调用applyMiddleware将thunk添加到中间件列表中.

const store=createStore(rootReducer,applyMiddleware(thunk))

c.修改action create,返回一个函数,其形参就是redux的dispatch.

const addTodo=(name)=>{
    return async (dispatch)=>{
        const res=await 异步动作()
        dispatch ({type:'todo/add',payload:'学习redux'})
    }
}
dispatch(addTodo('学习redux'))

4.redux中间件redux-logger

(1)使用步骤

1.安装:npm i redux-logger;

2.使用:在store/index.js中:

a.导入 redux-logger;

b.调用applyMiddleware函数时,将logger作为参数传入.

import {createStore,applyMiddleware} from 'react-redux'
import logger from 'redux-logger'
import rootReducer from './reducers'
const store=createStore(rootReducer,applyMiddleware(thunk,logger))

补充一个react开发工具的使用

4.1redux-devtools-extension的使用

1.react开发中工具

2.在项目中安装redux调试工具,他是一个npm包,npm i redux-devtools-extension -D.

3.配置.在store/index.js中进行配置和导入.

 import {createStore,applyMiddleware} from 'react-redux'
 import {composeWithDevTools} from 'redux-devtools-extension'
 const store=createStore(reducer,composeWithDevTools(applyMiddleware(中间件...)))
 export default store

5.Redux-Saga介绍

(1)Redux-Saga

redux-saga是一个用于管理应用程序Side Effect 副作用(例如:异步操作)的library,它的目的是让副作用管理的简单和高效.

redux-saga就是redux的一个中间件,可以通过正常的redux action 从主应用程序中启动,暂停和取消,它可以访问完整的redux state,也能够dispatch redux action.

redux-saga采用的是ES6的Generator功能,让异步代码看起来和同步代码一样.

(2)Redux-Saga常见API介绍

Middleware API

createSagaMiddleware(options)创建一个Redux middleware,并将Sagas连接到Redux store,通过createStore第三个参数传入;

​ options:传递给 middleware的选项列表,默认可以不用传递.

​ middleware.run(saga,...args)动态的运行saga.只能用于在applyMiddleware阶段之后执行Saga.

介绍的比较笼统,各位小伙伴如果有兴趣的话,可以到官网去学习一下,这里不介绍了.

给大家推荐几个不错的官方地址:

基于 redux 和 redux-saga 的数据流方案

React的Hook经验汇总