before
// actionTypes.js
const BOOK_LIST_GET = 'BOOK_LIST_GET';
const BOOK_DELETE = 'BOOK_DELETE';
export default {
/**
* 获取书籍列表
*/
BOOK_LIST_GET,
/**
* 删除书籍
*/
BOOK_DELETE,
};
// reducer.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;
after
import { createActions, handleActions, combineActions } from 'redux-actions';
const defaultState = { counter: 10 };
const { increment, decrement } = createActions({
INCREMENT: (amount = 1) => ({ amount }),
DECREMENT: (amount = 1) => ({ amount: -amount })
});
// increment(); // { type: 'INCREMENT' }
// decrement(); // { type: 'DECREMENT' }
const reducer = handleActions(
{
[combineActions(increment, decrement)]: (
state,
{ payload: { amount } }
) => {
return { ...state, counter: state.counter + amount };
}
},
defaultState
);
export default reducer;
createAction
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 };
},
});
**
handleAction
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;
ref
https://www.jianshu.com/p/d2615a7d725e
https://redux-actions.js.org/
**