redux-actions详解教程记录( redux使用更简单???)

前言

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

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

安装

npm install redux-actions

DEMO项目结构

入口

// 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'),
);

App 组件

// 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 文件

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

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

reducer 与 store

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

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

方法列表

• createAction

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

action.js

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'));

• createActions

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

action.js

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

嵌套定义

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

• handleAction

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

reducer.js

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

image-20201203114905282

• handleActions

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

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' },
);

• combineActions

顾名思义，合并actions

这个方法是合并 reducer 中 type,使多个action 可以触发同一个 reducer 处理方法。

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

actions.js

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

reducer.js

import { handleActions, combineActions } from 'redux-actions';
import { action1, action3 } from './action';

const specialReducer = handleActions(
  {
    // action1, action3 都触发该方法
    [combineActions(action1, action3)]: (state, action) => {
      return { action };
    },
  },
  {}
);

嵌套 action 绑定组件方案

新建 bindActionCreatorsPlus.js

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

应用组件 App.js

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

嵌套 action.js

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

Redux相关文章推荐

• React进阶教程之状态管理Redux以及React-redux插件(通俗易懂版）

• Redux 中间件使用

• bindActionCreators & combineReducers 使用记录

参考

• redux-actions

- END -