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 }