zoukankan      html  css  js  c++  java
  • redux-actions

    ♦ 安装插件

    cnpm i redux-actions -S

    ♦ actions代码

    import { createActions } from 'redux-actions'
     
    export default createActions({
       'HOME_DATA_TYPE': options => options
    })

    ♦ reducer代码

    import { handleActions } from 'redux-actions'
     
    const defaultState = {
       
    }
     
    export default handleActions({
       'HOME_DATA_TYPE': (state, action) => action.payload
    }, defaultState)

    ♦ 派发的action需要转换成驼峰的命名形式才可以使用,这里使用一个封装好的公共方法, 我给其命名为str

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

    ♦ 页面使用

    这里使用hook写的

    import React, { useEffect } from 'react'
    import { connect } from 'react-redux'
    import homeAction from '@/actions/home'
    import str from '@/utils/str'
    
    export default connect(state => {
      return {
    
      } 
    }, {
      homeAction: homeAction[str('HOME_DATA_TYPE')]
    })(Home)
    
    function Home(props) {
      useEffect(() => {
        const { homeAction } = props
        homeAction('小花')
      }, [])
      return (
        <div className="pages-home">
          <h1>home</h1>
        </div>
      )
    }
  • 相关阅读:
    7-2 一元多项式的乘法与加法运算 (20 分)
    cvc-complex-type.2.4.a: Invalid content was found starting with element(servlet)
    MOOC 2.3 队列
    MOOC 2.2 堆栈
    MOOC 2.1 线性表及其实现
    MOOC 1.3 最大子列和
    计时程序
    MOOC 1.1 什么是数据结构
    poj3253
    二分法查找——对数
  • 原文地址:https://www.cnblogs.com/fengxiana/p/13152217.html
Copyright © 2011-2022 走看看