#yyds干货盘点#redux-actions简单使用总结
  Qp5JTyIxtbwu 2023年11月08日 18 0

简单使用介绍:

installation

$ npm install --save redux-actions
# 或
$ yarn add redux-actions

多余的使用

import { createAction, handleActions } from 'redux-actions';
const speak = createAction('SPEAK')

export const reducer6 = handleActions(
  // reducerMap
  {
    [speak]: (state, action) => ({ ...state, speak: action.payload.speak })
  },
  { speak: 'hello' },
    // options
  {
    prefix: 'REDUX6',
    namespace: '--'
  }
)

上述方式略显多余,options中的prefix和namespace偶尔用一下还行,可以将dispatch的动作改造为带命名空间的REDUX6---SPEAK,这个看个人爱好了,我就直接简化了

直接一点,直接上最终用法

// store/index.js
import { combineReducers } from 'redux'

import * as app from './reducers/app'
export default combineReducers({ ...app })
  // 如果想使用嵌套的方式,利用combineReducers去嵌套
  app: combineReducers({ ...app })
})

// 如果想使用嵌套的数据格式,直接使用redux的combineReducers,不要尝试使用redux-actions中的嵌套的action结构,太不适合了
export default combineReducers({
  app: combineReducers({ ...app })
})

// reducers/app.js
import { createAction, handleActions } from 'redux-actions';

export const reducer6 = handleAction(
  {
    SPEAK: (state, action) => {
     return { ...state, speak: action.payload.speak }) 
    }
  },
  { speak: 'hello' }
)

使用combineReducers解决嵌套的数据结构的问题,redux-actions解决书写redux的问题,好像也挺简单的。

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
Qp5JTyIxtbwu