React redux-actions

// npm install --save redux-actions

1：作用：

当我们的在开发大型应用的时候，对于大量的action，我们的reducer需要些大量的swich来对action.type进行判断。

redux-actions可以简化这一烦琐的过程，它可以是actionCreator，也可以用来生成reducer，

其作用都是用来简化action、reducer。

主要函数有createAction、createActions、handleAction、handleActions、combineActions。

createAction

原来创建:

export const getCeshi = options => {
  return {
    type: [MINE],
    payload: request(services.data),
  }
}

现在：

import { createActions } from 'redux-actions'
import { MINE, MINE2 } from '@/constants'

export const getMine = createActions({
    [MINE]: options => options,
    [MINE2]: options => options,
    // [MINE]: options => request(services.data) // services 文件夹的接口
})

handleActions

作用：redux框架下的reducer操作state，主要使用switch或if else来匹配

原来reducer操作state写法要使用switch或if else来匹配:

原来：

export default function (state = defaultState, action) {
  switch (action.type) {
    case 'LODING':
      return { ...state, loading: action.payload }

    case 'CESHI':
      return { ...state, result: action.payload }

    default:
      return state
  }
}

现在：

import { handleActions } from 'redux-actions'
import { MINE, MINE2 } from '@/constants'

const mineState = {
    data: [],
    data2: '',
}

export default handleActions({
    [MINE]: (state, action) => ({ ...state, data: action.payload }) ,
    [MINE2]: (state, action) => ({ ...state, data2: action.payload }) ,
}, mineState) 

// handleAction可以更加显式地将action与其相对应的处理函数连接起来
// 并且省去了之前的各种switch-case判断
// 其第三个参数则是该state的默认值
// const num = handleAction('ADD', (state, action) => state + 2, 0)

页面中使用：

import React, { PureComponent } from 'react';
import './styles.less'
import { connect } from 'react-redux'
import { getMine } from '@/action/mine'
import { MINE, MINE2 } from '@/constants' // 常量
import { hump } from '@/utils/string' // 引用utils里的方法转换


export default @connect(state => {
    console.log(state, 'state');
    return {}
}, {
    getMine: getMine[hump(MINE)],
})
class extends PureComponent {
    
    fn = () => {
        this.props.getMine('7777777777777')
    }
    
    render() {
        return(
            <div className='home-mine'>
                <button onClick={this.fn}>点击redux-actions</button>
            </div>
        )
    }
}

utils / string.js

export const hump = sName => {
    return sName.toLowerCase().replace(/^\_/, '').replace(/\_([a-zA-Z0-9])([a-zA-Z0-9]+)/g, function(a, b, c){
      return b.toUpperCase() + c.toLowerCase()
    })
  }