iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
0
自我挑戰組

請你當我的好朋友吧!ReactJS!系列 第 18

【DAY 18】更快的撰寫action跟reducer吧!redux-actions參上

【前言】
  終於先把基本的redux告一段落了......可是工作上的進度還是大延遲(嘆氣
【正文】
  採用以往的方式撰寫action、reducer的確可行,但有沒有更快的方式撰寫我的action跟reducer呢?今天要來簡單介紹一下另一個輔助函式庫redux-actions。它主要目是幫我們快速的建構actions跟reducer。當然也要透過npm安裝的呢!
 安裝方法:
  npm install --save redux-actions
  
  redux-actions主要有幾個method可以使用:

  • createAction(s):幫我們建構action,也可以批量產生action(這裡只介紹單個)
// 利用redux-actions
import { createAction } from 'redux-actions';

// createAction第一個參數就是放action type
export const addToDo = createAction('ADD_TODO');

// 傳統action宣告
export const ADD_TODO = 'ADD_TODO';
export const addTodo = (text) => ({
    type: ADD_TODO,
    text,
});

// ---------------------------------------------
// createAction第二個參數是放function,參數可以當成是payload
export const addAUserInfo = createAction('ADD_USER_INFO', (name, age) => ({name, age}));

// 傳統action宣告
export const ADD_USER_INFO = 'ADD_USER_INFO';
export const addUserInfo = (name, age) =>({
    type: ADD_USER_INFO,
    payload: {
        name,
        age,
    },
});
  • handleAction(s):可以幫我們建構reducer,也可以批量(這裡只介紹單個)
import { handleAction } from 'redux-actions';

const defaultState = [];

const reducer = handleAction(
	// 第一個參數放type
	'ADD_TODO',
	// 第二個參數放reducer function
	 (state, action) => ([
		...state,
		{
			id: state.todo.length + 1,
			text: action.payload.text,
		}
	]),
	// 第三個參數放defaultState
	 defaultState,
);

export default reducer;

// -------------------------------------------------------------

// 以前的reducer
const ADD_TODO = 'ADD_TODO';
const defaultState = []

const reducer = (state = defaultState, action) => {
  switch(action.type) {
    case ADD_TODO:
       return [
        ...state,
        {
					id: state.length + 1,
          text: action.text,
        }
      ];
    default:
      return state;
  }
};

export default reducer;
  • combineActions:可以幫我們將多個action combine在一起,然後跟可以跟handleActions一起使用,產生一個多功能的reducer。(但這個我目前還沒有什麼用到)

今天就介紹到這邊吧XDD


上一篇
【DAY 17】利用redux與react搭配在做出一個to do list吧!(下)
下一篇
【DAY 19】redux的那些兩三事
系列文
請你當我的好朋友吧!ReactJS!30

尚未有邦友留言

立即登入留言