Question

对redux来说是全新的。有这种情况 -

完成表单提交操作后 -

onFormSubmit(e){
   e.preventDefault();
   this.props.fetchTracks(this.state.term);
}

动作并继续到reducer我返回action.payload这是一个数组。我注意到两种不同情况的不同行为 -

当减速器以这种方式写入时 -

export default function (state = [] , action) {
  switch(action.type) {
  case FETCH_TRACKS:
  return action.payload;
 }

 return state;
}

一旦减速器以这种方式编写 -

    export default function (state = [] , action) {
      switch(action.type) {
      case FETCH_TRACKS:
      return [action.payload, ...state];
     }

     return state;
   }

在我的组件上，我正在尝试对此数组进行映射，现在只需控制台记录数组的每个元素 -

renderVideos(track){
   console.log(track);
}

render(){
  return (
    <ul className="col-md-12 list-inline">
      {this.props.tracks.map(this.renderVideos)}
    </ul>
  )
}

在执行方案一时 - 没有调用renderVideos，没有console.log

在执行方案二时 - 正在调用renderVideo，但在执行操作之前似乎是console.log元素（我使用redux-logger查看日志）。此方案正在做的另一件事是将状态作为一个数组，将FETCH_TRACKS的每个操作保存为数组中的新索引而不是使用当前操作数组创建新状态。

正如我所说，对redux来说是全新的。

这里发生了什么？

Answer 1

在方案一中，很可能有效负载是空数组，因此控制台不会在地图上调用。

在方案二中，您必须使用rest-spread创建一个新状态，就像您已经处理过状态一样。

示例：

export default function (state = [] , action) {
  switch(action.type) {
    case FETCH_TRACKS:
      return [...action.payload, ...state];
  }

  return state;
}

Redux reducer有效载荷

1 个答案: