前言

Redux 的诟病是重复的模块代码太多，各路大佬都开始尝试解决这些问题，Redux-actions 悄然而生。

刚开始使用 Redux-actions 时遇到一些问题，那么专门写一篇博客全面详细的记录 Redux-actions 的使用。

安装

javascript
npm install redux-actions

javascript
// index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

javascript
// App.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from './action';
import './App.css';

function App(props) {
  console.log('!! props 📢：', props);
  return (
    <div className="action">
      <button
        onClick={() => {
          props.normalAction('测试');
          props.normalAction('测试');
        }}
      >
        测试Action
      </button>
    </div>
  );
}

export default connect(
  (state) => state,
  (dispatch) => {
    return {
      ...bindActionCreators(actions, dispatch),
    };
  },
)(App);

🏁 如果不熟悉 bindActionCreators 的用法可以参考我前面记录的 bindActionCreators & combineReducers 使用记录

action 文件

javascript
import { createAction, createActions } from 'redux-actions';

// 通常 action 方式定义
export const normalAction = (params) => {
  return {
    type: 'ACTIONS',
    payload: params,
  };
};

javascript
import { createStore } from 'redux';

const reducer = (state, action) => {
  switch (action.type) {
  case 'ACTIONS':
      return { ...state, ACTIONS: action.payload };    
    default:
      return state;
  }
};

const store = createStore(reducer, {});

export { store };

• createAction

  javascript
  // 参数列表
  createAction(
    type, 
    payloadCreator = Identity,
    ?metaCreator
  )

  javascript
  import { createAction, createActions } from 'redux-actions';
  
  export const normalAction = (params) => {
    return {
      type: 'ACTIONS',
      payload: params,
    };
  };
  
  export const specialAction = createAction(
    'ACTIONS',
    (params) => {
      return params;
    },
    (meta) => {
      return { admin: true };
    },
  );
  
  console.log('normalAction', normalAction('levenx'));
  console.log('specialAction', specialAction('levenx'));

  javascript
  // 参数列表
  createActions(
    actionMap,
    ?...identityActions,
    ?options
  )

  javascript
  import { createActions } from 'redux-actions';
  
  // 同时生成多个 action 方法,并集合到一个对象中，
  // !!🏁 但是这种方式生成的action不能通过 bindActionCreators 方法来绑定
  // 具体问题分析与解决方案可以参考 https://blog.csdn.net/m0_37890289/article/details/110493826
  // 文末贴出问题解决代码
  export const specialActions = createActions({
      //只考虑 payload
    ACTION1: (params) => {
      return params;
    },
    // 处理meta
    ACTION2: [
      (params) => {
        return params;
      },
      (meta) => {
        return { meta };
      },
    ],
    ACTION3: (params) => {
      return params;
    },
  });
  console.log('specialActions', specialActions);

  javascript
  export const specialActions = createActions({
    //增加层级，拓展命名空间
    APP: {
      ACTION1: (params) => {
        return params;
      },
      ACTION3: (params) => {
        return params;
      },
    },
    MY: {
      ACTION1: (params) => {
        return params;
      },
      ACTION3: (params) => {
        return params;
      },
    },
  });

  javascript
  // 参数列表
  createAction(
    type, 
    payloadCreator = Identity,
    ?metaCreator
  )

  javascript
  import { createStore } from 'redux';
  import { handleAction } from 'redux-actions';
  
  // 正常使用方式
  const specialReducer = handleAction(
    'ACTIONS',
    (state, { type, payload, meta }) => {
      debugger;
      return { payload };
    },
    { init: 'levenx' },
  );
  
  // 处理 action 错误情况使用这种方式
  const specialReducer = handleAction(
    'ACTIONS',
    {
      next(state, action) {
        return { payload };
      },
      throw(state, action) {
       return { error };
      },
    },
    { init: 'levenx' },
  );
  
  
  // console.log('📢 specialReducer', specialReducer);
  
  const store = createStore(specialReducer, {});
  
  export { store };
  

  javascript
  // 参数列表
  handleActions( reducerMap, defaultState);

  javascript
  import { handleActions } from 'redux-actions';
  
  const specialReducer = handleActions(
    {
      ACTION1: (state, action) => {
        return { levenx: '1' };
      },
      ACTIONS2: {
        next(state, action) {
          return { levenx: '1' };
        },
        throw(state, action) {
          return { levenx: '1' };
        },
      },
    },
    { INIT_DATA: 'levenx' },
  );

  javascript
  // 参数列表
  combineActions(...types);

  javascript
  const { action1, action3 } = createActions({
    ACTION1: (params) => {
      return params;
    },
    ACTION3: (params) => {
      return params;
    },
  });
  export { action1, action3 };

  javascript
  import { handleActions, combineActions } from 'redux-actions';
  import { action1, action3 } from './action';
  
  const specialReducer = handleActions(
    {
       // action1, action3 都触发该方法
      [combineActions(action1, action3)]: (state, action) => {
        return { action };
      },
    },
    {}
  );

  javascript
  // bindActionCreatorsPlus.js
  import { bindActionCreators } from 'redux';
  
  export default function bindActionCreatorsPlus(actions, dispatch) {
    if (typeof actions !== 'object' || !actions) {
      throw new Error('invalid actions');
    }
  
    let result = {};
    for (let key in actions) {
      if (actions.hasOwnProperty(key)) {
        const creator = actions[key];
        if (typeof creator === 'object' && creator) {
          //递归执行
          result[key] = bindActionCreatorsPlus(creator, dispatch);
        } else if (typeof creator === 'function') {
          result[key] = bindActionCreators(creator, dispatch);
        }
      }
    }
    return result;
  }

  javascript
  import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import bindActionCreatorsPlus from './bindActionCreatorsPlus';
  import * as actions from './action';
  
  function App(props) {
    console.log('!! props 📢：', props);
    return (
      <div className="action">
      </div>
    );
  }
  
  export default connect(
    (state) => state,
    (dispatch) => {
      return {
        //使用自定义的  bindActionCreatorsPlus方法处理action
        ...bindActionCreatorsPlus(actions.actions, dispatch),
      };
    },
  )(App);
  

  javascript
  export const actions = createActions({
    App: {
      ACTION1: (params) => {
        return params;
      },
      ACTION3: (params) => {
        debugger;
        return params;
      },
    },
  });

  • 参考

  Redux相关文章推荐

  嵌套 action 绑定组件方案

  • combineActions

  • handleActions

  • handleAction

  • createActions

方法列表

后续介绍 redux-actions 方法会修改对应的 action 和 reducer 文件。

reducer 与 store

App 组件

入口

DEMO项目结构