Изменения в React состояние в компоненте (через mapDispatchToProps) дает ошибку

Question

Я следующий пример Todo из Redux здесь https://github.com/reactjs/redux/tree/master/examples/todos

Я сделал некоторые незначительные изменения. Я принимаю больше полей в своем todo. {text, time, by} и отображение этих деталей в таблице.

Я хочу заказать этот стол по времени. Я делаю не хочу следовать схеме сокращения для этого прецедента. Почему ты спрашиваешь!

Для чего-то простого, как заказать Я не хочу добавлять это в состояние. Я хочу сохранить эти функции в пределах React state itself. Так как VisibleTodoList - это умный компонент, в котором в его состоянии есть todos, я хочу изменить его так, как мне нравится.

Мои 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> 
) 

Мой 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> 
) 

я получаю эту ошибку, когда я нажимаю на колонке Время Actions must be plain objects. Use custom middleware for async actions.

Что я делаю неправильно? И какой шаблон я должен соблюдать, чтобы достичь этого? Не отклоняясь слишком сильно от редукционной картины. Должен ли я использовать setState

Чтобы предоставить больше контекста, я хочу иметь локальное состояние пользовательского интерфейса, чем иметь его в магазине redux. Как объяснено здесь Should you ever use this.setState() when using redux?

Update 1: Я понимаю, что из-за orderTime не диспетчеризация объекта он жалуясь. Но мой более широкий вопрос, если я должен был добиться такой же функциональности. Как мне это сделать? Если я правильно понял, мне нужно будет использовать setState.

Answer 1

Это лучшее решение, которое я мог бы предложить до сих пор!

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

Это существо настройки пользовательского интерфейса (упорядочение, сортировка & других манипуляций) мы держим его в React местного государстве. Это приводит к чистому коду, потому что наш redux state чист и не хранит всю эту информацию.

Открыт для предложений/комментариев и лучшего ответа!