Redux reducers 和 action creators 之间的逻辑如何划分? [英] How to divide the logic between Redux reducers and action creators?

问题描述

我已经将一些逻辑放入减速器中，我认为应该将其放入 Action 中并传递下去?

I have some logic that I've put in the reducer which I'm thinking should be possibly put in the Action and passed down?

将这类东西放在动作或减速器中是最佳实践吗?

Is it best practice to put this sort of stuff in the actions or reducer?

工作示例此处.

减速器代码:

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
  }
}

推荐答案

你的 reducer 必须是纯的.目前它不纯.它调用了 deal()，后者调用了 getRandom()，后者依赖于 Math.random()，因此不是纯的.

Your reducer must be pure. Currently it is not pure. It calls deal() which calls getRandom() which relies on Math.random() and thus is not pure.

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

This kind of logic ("generating data", whether randomized or from user input) should be in the action creator. Action creators don’t need to be pure, and can safely use Math.random(). This action creator would return an action, an object describing the change:

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

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

The reducer would just add (or replace?) this data inside the state.

一般来说，从一个动作对象开始.它应该以这样一种方式描述变化，即使用相同的动作对象和相同的前一个状态运行reducer应该返回相同的下一个状态.这就是 reducer 不能包含 Math.random() 调用的原因——它们会破坏这个条件，因为它们每次都是随机的.您将无法测试您的减速器.

In general, start with an action object. It should describe the change in such a way that running the reducer with the same action object and the same previous state should return the same next state. This is why reducer cannot contain Math.random() calls—they would break this condition, as they would be random every time. You wouldn't be able to test your reducer.

在弄清楚 action 对象的外观后(例如像上面那样)，您可以编写 action creator 来生成它，并编写一个 reducer 来将 state 和 action 转换为下一个状态.生成动作的逻辑驻留在动作创建者中，对其作出反应的逻辑驻留在reducer中，reducer必须是纯的.

After you figure out how the action object looks (e.g. like above), you can write the action creator to generate it, and a reducer to transform state and action to the next state. Logic to generate an action resides in action creator, logic to react to it resides in the reducer, reducer must be pure.

最后，不要在状态内部使用类.它们不能按原样序列化.你不需要 Card 类.只需使用普通对象和数组即可.

Finally, don’t use classes inside the state. They are not serializable as is. You don’t need a Card class. Just use plain objects and arrays.

这篇关于Redux reducers 和 action creators 之间的逻辑如何划分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！