项目中使用redux-actions优雅的管理redux

一、前言

为什么要使用redux-actions?

使用原生的redux，需要大量的action type定义以及switch case的书写方式。

二、封装createActions

将定义好的actions，使用统一的命名方式。

createAction会帮我们定义成{type: "home_plus", payload: 1}的形式。

import { createAction } from 'redux-actions';

export default function createActions <T>(prefix: string, actions: T): { [propName: string]: any} {
  return Object.keys(actions).reduce((results, key) => {
    results[key] = createAction(`${prefix}_${key}`, actions[key]);
    return results;
  }, {});
}

三、使用createActions定义Actions

import createActions from '../../../actions';
import meta from '../meta';

interface Action {
  plus: () => {},
  minus: () => {}
}

export default createActions<Action>(meta.id, {
  plus() {
    const res = 1;
    return res;
  },
  minus() {
    const res = 1;
    return res;
  }
})

四、使用handleActions处理Actions

使用handleActions时，接收Object。key使用actions中定义的名称，value是一个函数，会接收state，action。action可以结构出 error和payload。

handleActions的返回值就是reducer。

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

const defaultState = {
  count: 0
}

export default handleActions<any, any>({
  [actions.plus](state, { error, payload }) {
    if(!error) {
      return {
        ...state,
        count: state.count + payload
      }
    }else {
      return handleError(state, payload);
    }
    
  },
  [actions.minus](state, { error, payload }) {
    if(!error) {
      return {
        ...state,
        count: state.count - payload
      }
    }else {
      return handleError(state, payload);
    }
  }
}, defaultState)

function handleError(state: any, payload: {message: string}) {
  if (payload.message) {
    message.error(payload.message);
    return {
      ...state,
      errorMessage: payload.message
    };
  }
  return state;
}

五、使用combineReducers拆分多个reducer

import { combineReducers } from 'redux';

import { meta as homeMeta, reducer as homeReducer } from '../pages/home'

export default combineReducers({
  [homeMeta.id]: homeReducer
})

六、添加middleware并创建store

创建store之后，就可以正常使用react-redux传入。

import { createStore,applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import rootReducers from '../reducers';
import createEnhancers from './enhancers';

const store = createStore(
  rootReducers, 
  applyMiddleware(
    promiseMiddleware
  )
);

export default store;