• 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
    }
    

      

  • 相关阅读:
    Delphi TMessage[3] TApplicationEvents.OnMessage
    Delphi TCursor[2] TScreen.Cursor
    Delphi TCursor[1] 鼠标光标图像
    Delphi TMessage[6] Perform、SendMessage、PostMessage 发送并响应消息
    Delphi TCursor[3] TControl.Cursor自定义光标
    删除mysql服务的具体方法
    uniApp 打包H5工程 超详细(打包实现跨域nignx配置)
    mysql 远程访问
    IDEA:端口号被占用解决办法
    hbuild 快捷键
  • 原文地址:https://www.cnblogs.com/yetiezhu/p/13135650.html
Copyright © 2020-2023  润新知