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

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())

3.1 用法

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

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 原理实现

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

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

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

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

function createAction(type) {
    return (payload) => {
        const action = {
            type,};
        if(payload !== undefined){
            action.payload = payload
        }
        return action;
    };
}

function createAction(type) {
    return (payload) => {
        const action = {
            type,...payload?{payload}:{}
        };
        return action;
    };
}

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

const increment = createAction('increment',(t)=> t * 2);
let objincrement = increment(10);// {type:"increment",paylaod:20}

function createAction(type,payloadCreator) {
    return (payload) => {
        const action = {
            type,};
        if(payload !== undefined){
            action.payload = payloadCreator(payload)
        }
        return action;
    };
}

function createAction(type,};
        if(payload !== undefined){
            action.payload = payloadCreator?payloadCreator(payload):payload
        }
        return action;
    };
}

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;
    }
}

const INCREMENT = "increment"
const DECREMENT = "decrement"
var reducer = handleActions({
    [INCREMENT]: (state,action) => ({
      counter: state.counter + action.payload
    }),[DECREMENT]: (state,action) => ({
      counter: state.counter - action.payload
    })
},initstate)

{[increment]:(state,action)=>{}} 

import {increment,decrement}from "./reducers.js"
var initstate = {count:0}
var reducer = createReducer({
    [INCREMENT]: increment,[DECREMENT]: decrement
},initstate)

//reducers.js
export let increment = (state,action)=>({counter: state.counter + action.payload})
export let decrement = (state,action)=>({counter: state.counter - action.payload})

5.1 用法

const incrementReducer = handleAction(INCREMENT,(state,action) => {
  return {counter: state.counter + action.payload}
},initialState);

5.2 原理实现

function handleAction(type,callback) {
    return (state,action) => {
      
    };
}

(state,action) => {
      
};

function handleAction(type,action) => {
        
      return callback(state)
    };
}

function handleAction(state,type,callback) {
    return callback(state)
}

function handleAction(type,action) => {
        
      return callback(state)
    };
}

function handleAction(type,action) => {
        if (action.type !== type) {
            return state;
        }
        return callback(state)
    };
}

function handleActions(handlers,defaultState) {
    const reducers = Object.keys(handlers).map(type => {
        return handleAction(type,handlers[type]);
    });
    const reducer = reduceReducers(...reducers)
    return (state = defaultState,action) => reducer(state,action)
}

var reducer = handleActions({
    [INCREMENT]: (state,initstate)

{
    [INCREMENT]: (state,action) => ({
      counter: state.counter - action.payload
    })
｝

const reducers = Object.keys(handlers).map(type => {
        return handleAction(type,handlers[type]);
    });

[
  handleAction(INCREMENT,action) => ({
      counter: state.counter + action.payload
  })),handleAction(DECREMENT,]

function handleAction(type,action) => {
        if (action.type !== type) {
            return state;
        }
        return callback(state)
    };
}

function handleActions(handlers,action)
}

const reducer = reduceReducers(...reducers)

[
  handleAction(INCREMENT,]

function reduceReducers(...args) {
    const reducers = args;
    return (prevState,value) => {
        return reducers.reduce((newState,reducer,index) => {
            return reducer(newState,value);
        },prevState);
    };
};

(prevState,value) => {
    return reducers.reduce((newState,index) => {
        return reducer(newState,value);
    },prevState);
};

return reducers.reduce((newState,prevState);

function handleActions(handlers,action)
}

reducer = (prevState,prevState);
};

(state = defaultState,action)

(state = defaultState,action) => {
    return reducers.reduce((newState,state);
}

• 【React系列---FSA知识】https://segmentfault.com/a/1190000010113847
• 【Redux-actions 的用法】https://zhuanlan.zhihu.com/p/273569290
• 【前端进阶之认识与手写compose方法】
• Redux 源码解析系列(一) -- Redux的实现思想）