介绍
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相关代码的一个工具。
