redux-actions 如何使用

npm地址：

https://www.npmjs.com/package/redux-actions

　　

第一步： 安装

npm install --save redux-actions

　　

第二步：使用

1、我在action文件下建立了一个home.js，里面写入

import { createActions } from 'redux-actions'     //引入
import * as TYPE from '@/constants/actionTypes'    
import { get } from '@/utils/request'    //自己手动封装了一个axios
import api from '@/services/api'    //这里是url接口地址

export default createActions({
  [TYPE.GET_DATA]: option => get(api.getuser) 
})

　　

2、reducer文件里建立了一个home.js 里面写入

import { handleActions } from 'redux-actions'
import * as TYPE from '@/constants/actionTypes'
 
const defaultState = {
  data: [],
}

export default handleActions({
  [TYPE.GET_DATA]: (state, action) => ({ ...state,  data: action.payload.users }) 
}, defaultState)

　　

3、pages下面 建立了一个home.jsx， 里面写入 这里使用的hook

import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import * as TYPE from '@/constants/actionTypes'
import { str } from '@/utils/string'   
import homeAction from '@/action/home'

　// 这里引入的 str 就是为了把他拿过来的方法名转换成 大写。 使用redux-actions，这里他把GET_DATA自动给我们转换成 getData 这种格式了

export default connect(({ home }) => {
  return {
    data: home.data
  }
}, {
  getData: homeAction[str(TYPE.GET_DATA)],
})(Hook)

function Hook(props) {
  const { getData, data } = props

  useEffect(() => {
    getData()
  }, [])
  
  return (
    <div>
      {JSON.stringify(data)}
    </div>
  )
}

　　

4、步骤3的 str 代码

function str (Names) {
  return Names.toLowerCase().replace(/^\_/, '').replace(/\_([a-zA-Z0-9])([a-zA-Z0-9]+)/g, function (a, b, c) {
    return b.toUpperCase() + c.toLowerCase()
  })
}

export {
  str
}