授权协议: MIT
开发语言: JavaScript TypeScript
操作系统: 跨平台
收录时间: 2020-09-01
提 交 者: SugarTurbo

rc-redux-model 提供了一种较为舒适的数据状态管理书写方式,让你简洁优雅地去开发;内部自动生成 action, 只需记住一个 action,可以修改任意的 state 值,方便简洁,释放你的 ⌨️ CV 键~

rc-redux-model 参考了 dva 的数据流方案,在一个 model 文件中写所有的 actionreducerstate,解读了 redux-thunk 的源码,内部实现了一个中间价,同时提供默认行为 action,调用此 action 可以直接修改任意值的 state,例如 :

只需要定义一个 model

export default {
  namespace: 'reduxModel',
  state: {
    testA: '',
    testB: [],
  },
}

那么 rc-redux-model 会自动帮你注册 action 及 reducers,等价于 :

export default {
  namespace: 'reduxModel',
  state: {
    testA: '',
    testB: [],
  },
  action: {
    settestA: ({ commit, currentAction }) => {
      commit({
        type: 'SET_REDUXMODEL_TESTA',
        payload: currentAction.payload,
      })
    },
    settestB: ({ commit, currentAction }) => {
      commit({
        type: 'SET_REDUXMODEL_TESTB',
        payload: currentAction.payload,
      })
    },
    // 推荐使用此action进行修改reducers值
    setStore: ({ dispatch, currentAction }) => {
      dispatch({
        type: `reduxModel/change${currentAction.payload.key}`,
        payload: currentAction.payload.values,
      })
    },
  },
  reducers: {
    ['SET_REDUXMODEL_TESTA'](state, payload) {
      return {
        ...state,
        ...payload,
      }
    },
    ['SET_REDUXMODEL_TESTB'](state, payload) {
      return {
        ...state,
        ...payload,
      }
    },
  },
}

那么你只需要在组件中,调用的默认 Action 即可

class MyComponent extends React.Component {
  componentDidMount() {
    this.props.dispatch({
      type: 'reduxModel/setStore',
      payload: {
        key: 'testA',
        values: '666',
      },
    })
  }
}

✨ 特性

  • 轻巧简洁,写数据管理就跟写 dva 一样舒服
  • 异步请求由用户自行处理,内部支持 call 方法,可调用提供的方法进行转发,该方法返回的是一个 Promise
  • 参考 redux-thunk,内部实现独立的中间件,所有的 action 都是异步 action
  • 提供默认行为 action,调用此 action ,可以修改任意的 state 值,解决你重复性写 action 、reducers 问题
  • 内置 seamless-immutable ,只需开启配置,让你的数据不可变
  • 默认检测不规范的赋值与类型错误,让你的数据更加健壮
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

rc-redux-model 的相关资讯

还没有任何资讯

rc-redux-model 的相关博客

Redux与它的中间件:redux-thunk,redux-actions,redux-promise,redux-saga

序言 这里要讲的就是一个Redux在React中的应用问题,讲一讲Redux,react-redux,redux-thunk,redux-actions,redux-promise...

[Redux] redux的概述

redux 的概述 随着 javascript 单页应用的不断发展,javascript 需要管理比以往都要多的状态,管理不断变化的 state 非常困难,...

redux、react-redux、redux-thunk、redux-saga使用及dva对比

一、redux使用   Redux的核心概念其实很简单:将需要修改的state都存入到store里,发起一个action用来描述发生了什么,用r...

Redux

感谢支持ayqy个人订阅号,每周义务推送1篇(only unique one)原创精品博文,话题包括但不限于前端、Node、Android、数学(W...

手写 redux 和 react-redux

1.手写 redux redux.js /** * 手写 redux */ export function createStore(reducer) { // 当前状态 let currentSt...

Redux 进阶之 react-redux 和 redux-thunk 的应用

1. react-redux React-Redux 是 Redux 的官方 React 绑定库。 React-Redux 能够使你的React组件从Redux store中读取数据,并且...

什么是Redux,为什么使用Redux,怎么使用Redux

1、什么是Redux 官方解释:Redux is a predictable state container for JavaScript apps. 意思就是Redux是js应用的 一种可预...

Flux、Redux到react-redux衍变发展之Redux解读

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/84569175 续上...

redux和react-redux小记

一开始接触redux时对于它的数据state和react本身的数据state还有点容易打结(它们是完全不同的两个东西,后面会讲到)现在搞清...

Redux

Redux的特点 统一的状态管理,一个应用中只有一个仓库(store) 仓库中管理了一个状态树(statetree) 仓库不能直接修改,修改...

rc-redux-model 的相关问答

还没有任何问答,马上提问

评论 (3)

加载中
和 redux-toolkit 相比,同样是用 thunk,你们的优势是什么?
09/05 18:31
回复
举报
和dva 一样呀
09/03 17:00
回复
举报
SugarTurbo软件作者
dva里面继承的是saga哈
09/04 16:16
回复
举报
更多评论
3 评论
9 收藏
分享
在线直播报名
返回顶部
顶部