推荐使用并手写实现redux-actions原理

一、前言

为什么介绍redux-actions呢?

第一次见到主要是接手公司原有的项目，发现有之前的大佬在处理redux的时候引入了它。

发现也确实 使得 在对redux的处理上方便了许多，而我为了更好地使用一个组件或者插件，都会去去尝试阅读源码并写成文章 ，这个也不例外。

发现也确实有意思，推荐大家使用redux的时候也引入redux-actions

在这里就介绍一下其使用方式，并且自己手写实现一个简单的redux-actions

二、介绍

在学习 redux 中，总觉得 action 和 reducer 的代码过于呆板，比如

2.1 创建action

let increment = ()=>({
   type:"increment"})

2.2 reducer

let reducer = (state,action)=>{
   
    switch(action.type){
   
      case "increment":return {
   count:state.count+1};break;
      case "decrement":return {
   count:state.count-1};break;
      default:return state;
    }
}

2.3 触发action

dispatch(increment())

综上所示，我们难免会觉得 increment 和 reducer 做一个小 demo 还行，遇到逻辑偏复杂的项目后，项目管理维护就呈现弊端了。所以最后的方式就是将它们独立出来，同时在 reducer 中给与开发者更多的主动权，不能仅停留在数字的增增减减。

redux-actions主要函数有createAction、createActions、handleAction、handleActions、combineActions。

基本上就是只有用到createAction，handleActions，handleAction

所以这里我们就只讨论这三个个。

三、 认识与手写createAction()

3.1 用法

一般创建Action方式:

let increment = ()=>({
   type:"increment"})
let incrementObj = increment();// { type:"increment"}

使用createAction 创建 action

import {
    createAction } from 'redux-actions';
const increment = createAction('increment');
let incrementObj = increment();// { type:"increment"}
let objincrement = increment(10);// {type:"increment",paylaod:10}

我们可以看到

let increment = ()=>({
   type:"increment"})
let incrementObj = increment();// { type:"increment"}

与

const increment = createAction('increment');
let incrementObj = increment();// { type:"increment"}

是等效的，那为什么不直接用传统方式呢?

不难发现有两点：

1. 传统方式，需要自己写个函数来返回incrementObj，而利用封装好的createAtion就不用自己写函数
2. 传统方式，在返回的incrementObj若是有payload需要自己添加上去，这是多么麻烦的事情啊，你看下面的代码，如此的不方便。但是用了createAction返回的increment，我们添加上payload，十分简单，直接传个参数，它就直接把它作为payload的值了。

let increment = ()=>({
   type:"increment"，payload:123})

3.2 原理实现

我们先实现个简单，值传入 type参数的，也就是实现下面这段代码的功能

const increment = createAction('increment');
let incrementObj = increment();// { type:"increment"}

我们发现createAction('increment')()才返回最终的action对象。这不就是个柯里化函数吗?

所以我们可以非常简单的写出来，如下面代码所示，我们把type类型当作action对象的一个属性了

function createAction(type) {
   
    return () => {
   
        const action = {
   
            type
        };
        return action;
    };
}

好了现在，现在实现下面这个功能，也就是有payload的情况

const increment = createAction('increment');
let objincrement = increment(10);// {type:"increment",paylaod:10}

很明显，这个payload是 在createAction('increment')返回的函数的参数，所以我们轻而易举地给action添加上了payload。

function createAction(type) {
   
    return (payload) => {
   
        const action = {
   
            type,