redux-actions学习笔记

介绍

redux-actions的产生，是为了简化redux的使用。

Redux传统用法

在使用redux-actions之前，我们先用传统的redux用法写一个例子。

actionTypes.js

const BOOK_LIST_GET = 'BOOK_LIST_GET';

export default {
  /**
   *  获取书籍列表
   */
  BOOK_LIST_GET,
};

actions.js

import actionTypes from './actionTypes';

const getBookList = () => {
  const bookList = [{
    id: '1',
    title: '123',
    description: '123',
  }, {
    id: '2',
    title: '234',
    description: '234',
  }];
  return {
    type: actionTypes.BOOK_LIST_GET,
    bookList,
  };
};

export default {
  getBookList,
};

reducers.js

import actionTypes from './actionTypes';

const initialState = {
  bookList: [],
};

const pageMainReducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.BOOK_LIST_GET:
      return {
        ...state,
        bookList: action.bookList,
      };
    default:
      return state;
  }
};
export default pageMainReducer;

index.js

import React from 'react';
import { connect } from 'react-redux';
import Bookshelf from './components/bookshelf';
import actions from './actions';

/**
 * 首页
 */
class PageMain extends React.Component {
  componentDidMount() {
    this.props.getBookList();
  }

  render() {
    return (
      <Bookshelf dataSource={this.props.bookList} />
    );
  }
}
export default connect((state) => {
  return {
    bookList: state.pageMain.bookList,
  };
}, {
  getBookList: actions.getBookList,
})(PageMain);

以上的代码中大致功能为：
PageMain 组件会在加载后，请求获取书籍信息，然后将获取到的值传给展示组件Bookshelf使用。
实现步骤：
首先我们创建了action类型BOOK_LIST_GET ，
然后根据BOOK_LIST_GET 创建了action工厂getBookList以及reducer。
最后用connect将store的值传映射到给PageMain的props，并且将dispath action的操作映射到props上。
当然在最外层我们已经根据reducer生成了一个store并传给了Provider，这里就不贴上去了。

使用redux-actions来处理action和reducer

修改actions.js为：

import { createAction } from 'redux-actions';
import actionTypes from './actionTypes';

const getBookList = createAction(actionTypes.BOOK_LIST_GET, () => {
  const bookList = [{
    id: '1',
    title: '123',
    description: '123',
  }, {
    id: '2',
    title: '234',
    description: '234',
  }];
  return bookList;
});

export default {
  getBookList,
};

修改reducer.js为：

import { handleAction } from 'redux-actions';
import actions from './actions';

const initialState = {
  bookList: [],
};

const pageMainReducer = handleAction(actions.getBookList, (state, action) => {
  return {
    ...state,
    bookList: action.payload,
  };
}, initialState);

export default pageMainReducer;

对比两种玩法之后，可以看到redux-actions实际上就是将我们之前做的操作封装了一道，让写法更简便。
createAction：
创建action工厂的一个操作，返回一个action工厂。
第一个参数：action类型
第二个参数：生成action的函数。此函数的可以传递参数，参数值为实际调用action工厂函数时传递的参数。

handleAction：处理action的操作，返回一个reduce。
第一个参数：action工厂
第二个参数：改变store的state的函数。这里会根据store当前的state数据以及action返回的值返回一个新的state给store。
第三个参数：当store的state啥也没有的时候给定一个初始的state。
这里说的store的state，是针对这里的state.pageMain。

createActions 与 handleActions

顾名思义，相对于createAction和handleAction而言，就是创建和处理多个action。

针对上面的代码我们加入一个删除操作，那么
修改actionTypes.js

const BOOK_LIST_GET = 'BOOK_LIST_GET';
const BOOK_DELETE = 'BOOK_DELETE';

export default {
  /**
   *  获取书籍列表
   */
  BOOK_LIST_GET,
  /**
   *  删除书籍
   */
  BOOK_DELETE,
};

用createActions修改actions.js

import { createActions } from 'redux-actions';
import actionTypes from './actionTypes';

export default createActions({
  [actionTypes.BOOK_LIST_GET]: () => {
    const bookList = [{
      id: '1',
      title: '123',
      description: '123',
    }, {
      id: '2',
      title: '234',
      description: '234',
    }];
    return bookList;
  },
  [actionTypes.BOOK_DELETE]: (id) => {
    console.info(`删除id为${id}的Book`);
    return { id };
  },
});

用handleActions修改reducers.js

import { handleActions } from 'redux-actions';
import actionTypes from './actionTypes';


const initialState = {
  bookList: [],
};

const pageMainReducer = handleActions({
  [actionTypes.BOOK_LIST_GET]: (state, action) => {
    return {
      ...state,
      bookList: action.payload,
    };
  },
  [actionTypes.BOOK_DELETE]: (state, action) => {
    return {
      ...state,
      bookList: state.bookList.filter(l => l.id !== action.payload.id),
    };
  },
}, initialState);

export default pageMainReducer;

修改index.js部分代码

import actions from './actions';

export default connect((state) => {
  return {
    bookList: state.pageMain.bookList,
  };
}, {
  bookDelete:actions.bookDelete ,
  bookListGet:actions.bookListGet,
})(PageMain);

createActions会返回一个对象，对象针对每个action类型都有一个值为action工厂的属性，属性名为action类型的值去掉下划线后的驼峰命名。

handleActions仍然返回一个reducer。
除了上面那种写法，handleActions还可以这么写：

[actionTypes.BOOK_LIST_GET]:
{
  next(state, action) {
    return {
      ...state,
      bookList: action.payload,
    };
  },
  throw(state) {
    return state;
  },
},

实际上多出来的功能就是加上了对异常的处理。

总结

简化编写redux相关代码的一个工具。