Redux 组件内反应状态的更改（通过mapDispatchToProps）会导致错误

从这里开始，我将遵循redux的Todo示例

我做了一些小改动。我在todo中接受更多字段。

{text，time，by}

并在表中显示这些详细信息

我想按时点这张桌子。我不想在这个用例中遵循redux模式。你为什么问

对于像订购这样简单的东西，我不想在状态中添加这个。我想在

反应状态本身中维护这些函数。由于VisibleTodoList是一个智能组件，其状态具有TODO，因此我希望能够以我喜欢的方式对其重新排序

My
VisibleTodoList.js

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
   case 'SHOW_ALL':
    return todos
   case 'SHOW_COMPLETED':
    return todos.filter(t => t.completed)
   case 'SHOW_ACTIVE':
    return todos.filter(t => !t.completed)
   default:
    throw new Error('Unknown filter: ' + filter)
  }
 }

const orderTime = (todos) => {
 console.log('inside order time!'); //Displays this. comes inside here.
 return todos.filter(t => t.time > 20) //This gives me error!!
}

const mapStateToProps = (state) => ({
  todos: getVisibleTodos(state.todos, state.visibilityFilter), // I do not want to add more things to the state. Want to keep it simple. 
})

const mapDispatchToProps =  ({
 onTodoClick: toggleTodo,
 onTimeClick: orderTime //My function defined above to returned filtered todos.
})

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

TodoList.js
如下所示

const TodoList = ({ todos, persons, onTodoClick, completed, onTimeClick}) => (
<div>
 <table>
  <tbody>
   <tr>
    <th>Task Name</th>
    <th 
     onClick={() => onTimeClick(todos)}
     style={{
       textDecoration: completed ? 'line-through' : 'none'
     }}>Time</th>
    <th>By person</th>
   </tr>
   {todos.map(todo =>
    <Todo
      key={todo.id}
      {...todo}
    />
  )}
  </tbody>
 </table>
</div>
)

consttodolist=（{todos，persons，onTodoClick，completed，onTimeClick}）=>(
任务名称
onTimeClick（todos）}
风格={{
text装饰：已完成？'line-through'：'none'
}}>时间
亲自
{todo.map（todo=>
)}
)

我的todo.js看起来几乎一样

const Todo = ({ onClick, completed, text, time, by }) => (
  <tr key={text}>
   <td style={{
    textDecoration: completed ? 'line-through' : 'none'}}>{text}</td>
    <td>{time}</td>
    <td>{by}</td>
  </tr>
)

const Todo=（{onClick，completed，text，time，by}）=>(
{text}
{time}
{by}
)

当我点击“时间”列时，我总是遇到这个错误
操作必须是普通对象。使用自定义中间件进行异步操作。

我做错了什么？
我应该遵循什么样的模式来实现这一点？不偏离redux模式太多。我必须使用
setState

为了提供更多的上下文，我希望有一个本地UI状态，而不是在redux存储中。就像这里解释的

更新1：我确实理解这一点，因为
orderTime
没有分派它正在抱怨的对象。但我更广泛的问题是，如果我必须这样做，是否能够实现相同的功能。我该怎么做？
如果我理解正确，我必须使用
setState
来执行此操作
 这是迄今为止我能想到的最好的解决方案

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'WEIGHT_SORT':
      return _.sortBy(todos, [function(o) { return o.time; }]);
       default:
     throw new Error('Unknown filter: ' + filter)
   }
 }

class TodoList extends React.Component {

  state = { filter: 'SHOW_ALL' }

  handleShow = filter => {
    this.setState({ filter: 'WEIGHT_SORT' })
  }


render(){
  const filteredTodos = getVisibleTodos(todos, this.state.filter)
  return (
    <div>
    <table>
      <tbody>
       <tr>
        <th>Task Name</th>
        <th 
         onClick={() => this.handleShow('SHOW_COMPLETED')}>Time</th>
        <th>By person</th>
       </tr>
       {filteredTodos.map(todo =>
        <Todo
          key={todo.id}
          {...todo}
          onClick={() => this.props.onTodoClick(todo.id)}
        />
       )}
    </tbody>
  </table>
  </div>
  )
}
}

const getVisibleTodos=（todos，过滤器）=>{
开关（过滤器）{
“重量/分类”案例：
return u.sortBy（todos，[function（o）{return o.time；}]）；
违约：
抛出新错误（'未知筛选器：'+筛选器）
}
}
类TodoList扩展了React.Component{
状态={filter:'SHOW_ALL'}
handleShow=过滤器=>{
this.setState（{filter:'WEIGHT_SORT'}）
}
render（）{
const filteredTodos=getVisibleTodos（todos，this.state.filter）
返回(
任务名称
this.handleShow（'SHOW_COMPLETED'）}>时间
亲自
{filteredTodos.map（todo=>
this.props.onTodoClick（todo.id）}
/>
)}
)
}
}

这是UI调整（排序、排序和其他操作），我们将其保持在React local状态。这会导致代码更干净，因为我们的
redux状态
是干净的，不会存储所有这些信息

接受建议/意见和更好的答案
 问题是您正在使用
orderTime（）
作为动作创建者，但实际上并非如此。当您单击时间列时，它将分派从
orderTime（）
返回的任何内容，它不是一个普通对象，而是一个数组。是正确的。我对我的问题进行了编辑，以反映同样的情况。我明白为什么我看到了错误。我的问题是我将如何实现这样的目标。