reduxactions简单使用总结

24次阅读

共计 1215 个字符,预计需要花费 4 分钟才能阅读完成。

redux-actions 简单使用总结

动机: 对于 redux 原生用法,不喜欢过于繁重的 actions-types 常量定义以及 switch case 的书写方式,redux 就是一个工具,不喜欢在工具上面,浪费很多体力,这点刚好跟 redux-actions 动机一致,使用下来也觉得很是方便。

API 文档过了一遍,除了 handleAction(s),没发现特别非用不可的东西,除了对一个 prefix 略感兴趣

简单使用介绍:

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 的问题,好像也挺简单的

正文完
 0