利用 typescript 写 react-redux 和 redux-thunk,以及 thunk 等中间件的实现过程

2019-11-10 admin

react-redux 的常规使用步骤

  • Provider 作为顶层全局状态的提供者,需要传递一个参数,全局状态 store
import { Provider } from 'react-redux';
<Provider store={ store }></Provider>
  • storecreateStore 函数创建生成,需要传递 reducer 纯函数作为参数
import { createStore, combineReducers } from 'redux';
const rootReducer = combineReducers({
    reducer
});
const store = createStore(rootReducer);
  • reducer 又接收两个参数,stateaction,根据不同的 action 返回一个新的 state
const reducer = (state, action) => {
    switch (action) {
        default:
            return state;
    }
};
  • 接下来就可以在组件中使用 redux 了
  • mapStateToProps 会接收全局 state 作为参数,返回一个对象,对象的属性作为提供给组件的 props
{ props.reducer };

const mapStateToProps = (state) => ({
    reducer: state.reducer
})
  • mapDispatchToProps 接收 dispatch 作为参数,返回的对象的属性是方法,方法中会调用这个 dispatch 进行更新,可以往 dispatch 中传递对象(只能触发一次dispatch)或者函数(可以触发任意次数,异步操作当然也可以)
props.action();

const mapDispatchToProps = (dispatch) => ({
    action: () => dispatch(action)
})
  • actionCreator 用来生成传递给 dispatch 的参数,也就是通常会在 actionCreator 中返回 action 对象
// 返回对象
const actionCreator = function(data) {
    return {
        type: ACTION_TYPE,
        data
    }
}

// 使用
props.action(someData);

const mapDispatchToProps = (dispatch) => ({
    action: (data) => dispatch(actionCreator(data))
})

TypeScript 写法

上面的代码在 js 环境下执行没有问题,直接将文件名后缀改为 .ts,不出意外是会提示错误的……

例如:

// action.ts
// error: 参数“data”隐式具有“any”类型
export const CHANGE_NAME = 'CHANGE_NAME';
export const changeName = (data) => ({
    type: CHANGE_NAME,
    data
});

// reducer.ts
// error: 参数“action”隐式具有“any”类型
import { CHANGE_NAME } from './action';
const initialState = {
    name: 'lixiao'
};
export default (state = initialState, action) => {
    switch (action.type) {
        case CHANGE_NAME:
            retutn Object.assign({}, state, {
                name: action.data
            });
        default:
            return state;
    }
};

// rootReducer.ts
import { combineReducers } from 'redux';
import home from './pages/Home/reducer';
export default combineReducers({
    home
});

// Home.tsx
// error: 参数“state”隐式具有“any”类型
//        参数“dispatch”隐式具有“any”类型
//        参数“data”隐式具有“any”类型
const mapStatetoProps = (state) => ({
    name: state.home.name
});
const mapDispatchToProps = (dispatch) => ({
    changeName: (data) => dispatch(changeName(data)),
})

ts 做了静态编译,一部分目的就是为了避免随意取属性这样的操作。例如 mapStateToPropsstate.home 这样的操作,需要告诉 ts,参数中的 state 有哪些属性可以取,同样的道理,拆分之后的每一个 reducer 有哪些属性可以取,都需要明确的告诉 ts,(使用 any 类型就不太友好了)。接下来对这些提示错误的变量进行类型声明。

actionCreator

参数中的 data 作为该类型 action 的负载,变量类型设置为 any 是可以接受的

// action.ts
export const CHANGE_NAME = 'CHANGE_NAME';
export const changeName = (data: any) => ({
    type: CHANGE_NAME,
    data
});

reducer

reducer 接收 stateaction 两个参数,action 通常会有一个动作类型属性 type 和 动作负载 data,可以在整个应用中统一为这个形式;而 这里的state 会在其他连接上 redux 的组件中进行访问,因此有必要定义好一个接口,约定能访问到这个 state 的哪些属性。

// global.d.ts
declare interface IAction {
    type: string;
    data: any;
}

// reducer.ts
import { CHANGE_NAME } from './action';

// 这个接口约定子 reducer 能访问到的属性
export interface IHomeState {
    name: string;
}
const initialState: IHomeState = {
    name: 'lixiao'
};
export default (state = initialState, action: IAction): IHomeState => {
    switch (action.type) {
        case CHANGE_NAME:
            return Object.assign({}, state, {
                name: action.data
            });
        default:
            return state;
    }
};

rootReducer

作为顶层 state,在子组件中通常会通过它再去访问子 reducer 中的 state,前面已经约定好了子 reducer 中的 state 能够取到哪些属性,现在还需要约定好顶层 state 能取到哪些子 state

// rootReducer.ts
import { combineReducers } from 'redux';
import home, { IHomeState } from './pages/Home/reducer';

// 每增加一个子 reducer,都在这个接口中同步更新
export interface IStore {
    home: IHomeState
}
export default combineReducers({
    home
});

组件中使用 redux

// Home.tsx
import { Dispatch } from 'redux';
import { IStore } from '../../rootReducer';

// 组件的 props 类型
interface IProps {
    name: string;
    // 这里的 changeName 和 actionCreator 中的不是同一个,所以返回值类型不是对象
    changeName(data: any): void;
}
const mapStatetoProps = (state: IStore) => ({
    name: state.home.name
});
// Dispatch 接收的参数为对象
const mapDispatchToProps = (dispatch: Dispatch) => ({
    changeName: (data: any) => dispatch(changeName(data)),
})

redux-thunk

在前面的例子中,将 action 传递给 dispatch,然后根据 reducer 函数返回新的 state,这个操作是同步的,类似于 vuex 中的 mutation。redux-thunk 是处理异步 action 的一种解决方式。

异步 action

一个很常见的场景,发送 ajax 请求成功之后触发 dispatch。最简单的实现方式是将这个操作封装成一个函数:

const asyncAction = () => {
    dispatch({ type, data });
    ajax().then(res => dispatch(res));
}

若这个操作需要在多个地方调用呢?复制粘贴这个函数也是可行的,但更好的做法是使用 redux-thunk 这样的中间件,在 actionCreator 中生成一个包含异步操作的 action

redux-thunk 用法

  • 在创建 store 的时传入 redux-thunk 中间件
// index.tsx
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(rootReducer, applyMiddleware(thunk));
  • actionCreator 返回的是一个函数,在这个函数中可以做任意的事情,触发任意次数的 dispatch,当然也包括异步操作。
// action.ts
import { Dispatch } from 'redux';

export const CHANGE_NAME = 'CHANGE_NAME';
export const changeName = (data: any) => ({
    type: CHANGE_NAME,
    data
});
export const changeNameAsync = (data?: any) => (dispatch: Dispatch) => {
    dispatch(changeName('loading'));
    fetch('/api').then(res => res.json()).then(res => dispatch(changeName(res.data)));
}
// Home.tsx
import { changeName, changeNameAsync } from './action';

// dispatch 可以传入对象、函数,这里不能直接简单的使用 Dispatch 类型
const mapDispatchToProps = (dispatch: any) => ({
    changeName: (data: any) => dispatch(changeName(data)),
    changeNameAsync: () => dispatch(changeNameAsync())
});
// 也可以使用 bindActionCreators
const mapDispatchToProps = (dispatch: Dispatch) => (bindActionCreators({
    changeName,
    changeNameAsync
}, dispatch))

redux-thunk 实现过程

使用一次之后就发现,同步 action 与异步 action 的区别在于,同步操作 dispatch 一个对象,而异步操作是 dispatch 一个函数,在这个函数中可以包含异步、dispatch 同步 action 等任意操作。

createStore

基础版本

在引入 redux-thunk 之前,生成 store 的方式为

const store = createrStore(reducer, initialState)

第二个参数 initialState 为初始状态,可选

// 两个参数
function createStore(reducer, preloadedState) {
    let currentReducer = reducer;
    let currentState = preloadedState;

    // 比较重要的函数 dispatch
    function dispatch(action) {
        // 这就是为什么也可以在 reducer 中初始化 state
        // 也可以发现这里的参数 preloadedState 的优先级高于 reducer 中的 initialState
        currentState = currentReducer(currentState, action);
    }

    // 页面刚打开的时候,调用 createStore,再执行一次 dispatch,更新 currentState
    // 所以 redux 开发工具中会有一个 @@INIT 类型的 action
    dispatch({ type: ActionTypes.INIT });
}
高级版本

引入 redux-thunk 之后,生成 store 的方式也有所变化

const store = createrStore(reducer, initialState, enhancer)

第三个参数是一个函数,接下来看看传入第三个参数时, createStore 内部是如何处理的

function createStore(reducer, preloadedState, enhancer) {
    // 由于第二个参数是可选的,所以需要一些代码进行参数数量和参数类型的检测
    // ts 就方便了……
    // 检测通过之后就提前 return 了,
    return enhancer(createStore)(reducer, preloadedState)
}

进行一下代码转换

const store = createStore(rootReducer, applyMiddleware(thunk));
// enhancer 就是 applyMiddleware(thunk)
// preloadedState 为 undefined
// 代码转换
const store = applyMiddleware(thunk)(createStore)(rootReducer);

applyMiddleware

import compose from './compose';

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
          'Other middleware would not be applied to this dispatch.'
      )
    }

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

接着进行代码装换

const store = applyMiddleware(thunk)(createStore)(rootReducer);
// 相当于在执行下面这串代码
const store = createStore(rootReducer) // 这个 store 是基础版本中的 store
let dispatch = () => {
    throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
        'Other middleware would not be applied to this dispatch.'
    )
}

const middlewareAPI = {
    getState: store.getState,
    // dispatch: (rootReducer) => dispatch(rootReducer)
    dispatch: dispatch
}
const chain = [thunk].map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
// 这是最终返回的 store 
return {
    ...store,
    dispatch
}

再看看 thunk(middlewareAPI)compose 做了什么

thunk

// redux-thunk/src/index.js 简化之后
const thunk = ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
        return action(dispatch, getState);
    }

    return next(action);
};

compose

function compose(...funcs) {
    if (funcs.length === 0) {
        return arg => arg
    }

    if (funcs.length === 1) {
        return funcs[0]
    }

    return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

传入的多个中间件,会依次作为参数;只有一个中间件则直接返回这个函数

dispatch 怎么被拓展的

const store = createStore(rootReducer)
// const chain = [thunk].map(middleware => middleware(middlewareAPI))
// const chain = [thunk(middlewareAPI)];
const chain = [(next => action => {
    if (typeof action === 'function') {
        return action(dispatch, store.getState);
    }
    return next(action);
})]
// dispatch = compose(...chain)(store.dispatch)
dispatch = action => {
    if (typeof action === 'function') {
        return action(dispatch, store.getState);
    }
    return store.dispatch(action);
}

当传给 dispatch 的参数不是函数时,就是基础版本,直接调用 reducer 函数进行更新 state;传入的是函数时,执行函数体的内容并把 dispatch 传进去,在这个函数内部就又可以使用 dispatch 做想做的事情了。

总结

大部分函数都是 redux 提供的,闭包用的比较多,(params1) => (params2) => { someFunction(params1, params2) } 这样的用法很多,看起来容易头晕,但也就是每执行一次函数传入一次参数。

[转载]原文链接:https://segmentfault.com/a/1190000020958726

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78916.html

文章标题:利用 typescript 写 react-redux 和 redux-thunk,以及 thunk 等中间件的实现过程

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
回到顶部