当前位置:   jquery > 正文

如何划分Redux Reducer与动作创建者之间的逻辑?

javascript,reactjs,redux,安全,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工具

我有一些逻辑,我已经把它放在reducer中,我认为应该把它放在Action中并传递下去?

将这类东西放入动作或减速器中是最佳做法吗?

这里的工作示例.

减速机代码:

function Card() {
  this.card = (Math.random()*4).toFixed(0);
}

Card.prototype = {
  getRandom: function(){
    var card;
    //console.log(this.card)
    switch (this.card) {
      case '1':
      card = 'heart';
      break;
      case '2':
      //card = 'diamonds';
      card = 'heart'; // weight the odds abit
      break;
      case '3':
      card = 'club';
      break;
      case '4':
      card = 'spade';
      break;
      default:
      card = 'heart';
      break;
    }
    return card;
  }
}

var dealer = {
  deal: function(){
    var results = [];
    for(var i = 0; i <4; i++){
      var card = new Card();
      results.push(card.getRandom());
    }
    console.log(results);
    return results;
  }
}


const initialState = {
  count: 0,
  data: []
}

function counter (state = initialState, action) {
  let count = state.count
  switch (action.type) {
    case 'increase':
      return Object.assign({}, state, {
        data: dealer.deal(),
        count: state.count+1
      })
    default:
      return state
  }
}

Dan Abramov.. 63

你的减速机必须是纯净的.目前它并不纯粹.它调用依赖于deal()哪些调用getRandom()Math.random()不是纯粹的调用.

这种逻辑("生成数据",无论是随机的还是来自用户输入的)应该在动作创建者中.动作创作者不需要是纯粹的,并且可以安全地使用Math.random().此操作创建者将返回一个操作,一个描述更改的对象:

{
  type: 'DEAL_CARDS',
  cards: ['heart', 'club', 'heart', 'heart']
}

reducer只是在状态中添加(或替换?)这些数据.

通常,从操作对象开始.它应该以这样的方式描述更改,即使用相同的操作对象和相同的先前状态运行reducer应该返回相同的下一个状态.这就是减速器不能包含Math.random()调用的原因 - 它们会破坏这种情况,因为它们每次都是随机的.你将无法测试你的减速机.

在弄清楚动作对象的外观(例如上面的内容)之后,您可以编写动作创建器来生成它,并使用减速器将状态和动作转换为下一个状态.生成动作的逻辑驻留在动作创建者中,对其作出反应的逻辑驻留在reducer中,reducer必须是纯粹的.

最后,不要在州内使用类.它们不是可序列化的.你不需要Card上课.只需使用普通对象和数组.



1> Dan Abramov..:

你的减速机必须是纯净的.目前它并不纯粹.它调用依赖于deal()哪些调用getRandom()Math.random()不是纯粹的调用.

这种逻辑("生成数据",无论是随机的还是来自用户输入的)应该在动作创建者中.动作创作者不需要是纯粹的,并且可以安全地使用Math.random().此操作创建者将返回一个操作,一个描述更改的对象:

{
  type: 'DEAL_CARDS',
  cards: ['heart', 'club', 'heart', 'heart']
}

reducer只是在状态中添加(或替换?)这些数据.

通常,从操作对象开始.它应该以这样的方式描述更改,即使用相同的操作对象和相同的先前状态运行reducer应该返回相同的下一个状态.这就是减速器不能包含Math.random()调用的原因 - 它们会破坏这种情况,因为它们每次都是随机的.你将无法测试你的减速机.

在弄清楚动作对象的外观(例如上面的内容)之后,您可以编写动作创建器来生成它,并使用减速器将状态和动作转换为下一个状态.生成动作的逻辑驻留在动作创建者中,对其作出反应的逻辑驻留在reducer中,reducer必须是纯粹的.

最后,不要在州内使用类.它们不是可序列化的.你不需要Card上课.只需使用普通对象和数组.


@danielepolencic如果逻辑在动作创建者中,则重放创建的动作将始终产生相同的状态.如果逻辑在reducer中,则重放动作的结果不保证是相同的.在某些情况下这可能无关紧要,但如果您希望redux dev工具运行良好,则需要它. 声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
  • 如何解决《将javascript规则应用于克隆元素》经验,为你挑选了1个好方法。html,javascript,jquery,rust,注入,css,容器,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析... [详细]

  • 如何解决《具有双引号的正则表达式的ng-pattern无法正确转义》经验,为你挑选了0个好方法。javascript,regex,angularjs,ng-pattern,angularjs-ng-pattern,DevBox,在线流程图,... [详细]

  • 如何解决《将jqPlot图保存到图像文件》经验,为你挑选了1个好方法。javascript,image,save,mouseclick-event,jqplot,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,jso... [详细]

  • 如何解决《字符串在Javascript中无法正确排序》经验,为你挑选了1个好方法。javascript,https,html,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,... [详细]

  • 如何解决《使用Reactv0.14.3实现路由器》经验,为你挑选了0个好方法。javascript,reactjs,react-jsx,react-router,react-routing,DevBox,在线流程图,编程,编程问答,程序员,... [详细]

  • 如何解决《怎么不是帮手?》经验,为你挑选了1个好方法。javascript,meteor,meteor-blaze,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工... [详细]

  • 如何解决《在光标位置的可编辑div内插入多个元素》经验,为你挑选了0个好方法。javascript,jquery,html,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,uni... [详细]

  • 如何解决《覆盖动画填充模式:在JavaScript/CSS中转发》经验,为你挑选了0个好方法。javascript,css,jquery,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,un... [详细]

  • 如何解决《Chrome扩展程序ajax发送格式错误的重音字符》经验,为你挑选了0个好方法。javascript,ajax,jquery,google-chrome,google-chrome-extension,DevBox,在线流程图,编... [详细]

  • 如何解决《在选定的选项卡上加载内容(基础)》经验,为你挑选了2个好方法。javascript,css,ajax,jquery,zurb-foundation,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解... [详细]

  • 如何解决《正则表达式获得最后一个css类》经验,为你挑选了0个好方法。javascript,css,regex,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,... [详细]

  • 如何解决《TweenMax将无法正确初始化:"Uncaught无法补间空目标."》经验,为你挑选了1个好方法。javascript,tweenmax,ecmascript-6,reactjs,gsap,DevBox,在线... [详细]

  • 如何解决《找到具有正好3个除数的数字的更好解决方案》经验,为你挑选了2个好方法。javascript,algorithm,math,算法,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,un... [详细]

  • 如何解决《JavaScript中的重入》经验,为你挑选了1个好方法。javascript,reentrancy,安全,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发... [详细]

  • 如何解决《如何动态更新Ember.Route模型?》经验,为你挑选了0个好方法。ember.js,javascript,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开... [详细]

  • 如何解决《反应条件渲染模式》经验,为你挑选了1个好方法。javascript,reactjs,css,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工... [详细]

  • 如何解决《在JavaScript中使用两种方法散列JSON字符串以在URL中使用》经验,为你挑选了1个好方法。javascript,encryption,url,base64,json,DevBox,在线流程图,编程,编程问答,程序员,开发... [详细]

  • 如何解决《淡化页面过渡到锚点》经验,为你挑选了0个好方法。javascript,anchor,jquery,fade,https,ajax,go,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生... [详细]

  • 如何解决《Angularjs何时何地绑定事件》经验,为你挑选了1个好方法。javascript,event-handling,angularjs,jquery,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json... [详细]

  • 如何解决《Androidwebview加载网址不适用于Instagram网页》经验,为你挑选了1个好方法。android,webview,facebook,javascript,twitter,DevBox,在线流程图,编程,编程问答,程序... [详细]

相关标签
  

闽ICP备14008679号