我在减速机里放了一些逻辑,我想应该放在动作中,然后传下go ?

把这类东西放到行动或行动中是最好的做法吗?

工作示例here.

减速器代码:

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

推荐答案

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

这种逻辑("生成数据",无论是随机的还是用户输入的)应该在action creator中.而纯粹的创造者不需要安全地使用.此动作创建者将返回一个动作an object describing the change:

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

减速机只需添加(或替换?)这些数据来自州内.

一般来说,start with an action object.它应该以这样一种方式来描述更改:使用相同的操作对象和相同的前一个状态运行reducer,应该返回相同的下一个状态.这就是为什么reducer不能包含Math.random()个调用,因为它们会打破这个条件,因为每次调用都是随机的.你将无法测试你的减速器.

在弄清楚动作对象的外观后(例如,如上所述),可以编写动作创建者来生成它,并编写一个减缩器来将状态和动作转换为下一个状态.Logic to generate an action resides in action creator, logic to react to it resides in the reducer, reducer must be pure.

最后是don’t use classes inside the state.它们不能按原样序列化.你不需要Card级.只需使用普通对象和array.

Reactjs相关问答推荐

单击按钮时在子元素中不显示任何内容-react

react 下拉菜单任务

后端关闭时如何在REACTION AXIOS拦截器中模拟数据?

我想删除NextJs中的X轴标签APEXCHARTS

无法在主组件的返回语句中呈现预期组件

React:关于useEffect钩子如何工作的困惑

在 React 中是否有任何理由要记住 Redux 操作创建者?

我从 S3 存储桶下载图像时收到错误

React-router动态路径

如何将 npm 包添加到我的 Vite + React 应用程序中?

运行 npm run build 出现问题

React v6 中的公共和私有路由

如何在同一路由路径上重新渲染组件(链接,V6)reactjs

React Final Form - 单选按钮在 FieldArray 中不起作用

React - 仅在变量为真时显示项目

使用 React.UseEffect 从 api 获取但我的清理返回不起作用

如何在 react-router-dom v6 中实现监听功能?

服务器端分页未按预期工作

React中`onScroll`和`onScrollCapture`之间的区别?

Cypress 中的 process.env 空对象