Ruby on Rails и React / Redux, Uncaught TypeError: (0, _tasks.getTask) не является функцией

Question

Я хочу сделать переход от ссылки на статью к самой статье, когда я нажимаю на ссылку, конструкция запускается: Не найдено. Скажи мне, что я делаю не так.

task_conteiner.js

import React, { Component } from 'react';
import { browserHistory } from 'react-router'; 

import { Link } from 'react-router';

export default class TasksContainer extends Component {

onShowMoreTask(id) {
browserHistory.push(`#/tasks/${id}`);
location.reload()
}


renderTasks() {
let filterComleted = this.props.tasks.tasks
let str = '★'
let style 

if (this.props.Completed === "task.completed") {
  filterComleted = filterComleted.filter(task => task.completed);
} else {
  filterComleted = filterComleted.filter(task => !task.completed);
} 

return filterComleted.map((task) => {
  if(task.completed){
      style = {
        textDecoration: 'line-through'
      }
  }

  return (
    <div key={task.id}>
      <li className="todo">
        <div className="container">
          <div className="col-md-3" onClick={() => this.onShowMoreTask( task.id )}>{ task.title }</div>
          <div className="col-md-3" style={style}>{ task.description }</div>
          <div className="col-md-3" style={style}>{ task.due_date }</div>
          <div className="col-md-1 star">{ str.repeat(task.priority) }</div>
            <span onClick={() => this.props.onCompletedTask(task.id, task.completed)} className={task.completed ? "glyphicon glyphicon-repeat" : "glyphicon glyphicon-ok"} title={task.active ? "Mark active" : "Mark completed"}></span>
            <span onClick={() => this.props.onEditTask( this.props.editId, task.id )} className="glyphicon glyphicon-pencil" title="Edit task"></span>
            <span onClick={() => this.props.onDeleteTask(task.id)} className="glyphicon glyphicon-trash" title="Delete"></span>
          </div>
         </li>
    </div>
  );
});
}

render() {
return ( 
  <div>
    {this.renderTasks()}
  </div>
);  
}
}

---

task_details.js

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import Exit from '../authentication/exit';
import { browserHistory } from 'react-router'; 
import { getTask } from '../../actions/tasks';
import TasksList from './tasks_list';

import '../../index.css';
import Link from 'react-router'

class TaskDetails extends Component {
componentDidMount () {
let id = this.props.params.id;
this.props.onGetTask(id);
};

render() {
const { task } = this.props
console.log(this.props.location.pathname, "xxxxxxxx")
return (
  <div>
    {  this.props.task ? 
      <div className="container">
        <h2 className="text-center">{task.title}</h2>
        <div className="col-md-2">
          <h4 className="pull-right"><i>{task.due_date}</i></h4>
        </div>
        <div className="clearfix"></div>
        <div className="description">
          <p>{task.description}</p>
        </div>
      </div>
    :
    <div className="container">
      <div><h2>Not found</h2></div>
    </div>  
    }
  </div>
);
}
};

export default connect(
state => ({
task: state.tasks.item
 }),

dispatch => ({
onGetTask: (id) => {
  dispatch(getTask(id));
},
})

)(TaskDetails);

Task_details запускает конструкцию:

<div className="container">
  <div><h2>Not found</h2></div>
</div>

В консоли произошла ошибка:

 /tasks/6 xxxxxxxx
task_details.js:50 Uncaught TypeError: (0 , _tasks.getTask) is not a  function
at Object.onGetTask (task_details.js:50)
at TaskDetails.componentDidMount (task_details.js:14)
at ReactCompositeComponent.js:265
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponent.js:264
at CallbackQueue.notifyAll (CallbackQueue.js:76)
at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
at ReactReconcileTransaction.closeAll (Transaction.js:206)
at ReactReconcileTransaction.perform (Transaction.js:153)
at batchedMountComponentIntoNode (ReactMount.js:126)

Спасибо за вашу помощь.

и

редукторы / task.js

export default function tasks(state = {
tasks: [],
edit: '',
sortBy: {title: "priority", asc: "desc"}
}, action) {

switch (action.type) {
case "FETCH_TODOS_SUCCESS":
  return {
    ...state,
    tasks: action.payload
  };

case "GET_TASKS":
  return {
    ...state,
    tasks: action.payload
  }

case "ADD_TASK":
  return {
    ...state,
    tasks: [action.payload, ...state.tasks]
  }

case "DELETE_TASK":
  state.tasks = state.tasks.filter(t => t.id !== action.payload);
  return {
    ...state,
    tasks: [...state.tasks]
  }

case "EDIT_TASK":
  state.tasks = state.tasks.filter(t => t.id !== action.payload.id);
  return {
    ...state,
    tasks: [action.payload, ...state.tasks]
  }

case "COMPLITED_TASK":
  state.tasks = state.tasks.filter(t => t.id !== action.payload.id);
  return {
    ...state,
    tasks: [action.payload, ...state.tasks]
  };

case "EDIT_ID":
  return {
    ...state,
    edit: action.payload
  }
case "SORT_BY":
  return {
    ...state,
    sortBy: action.payload
  }
default:
  return state;
}
}

Действие / task.js

import axios from 'axios';
import cookie from 'react-cookies';
//const API_URL = `https://evening-taiga-79121.herokuapp.com/todos`;
const API_URL = `http://localhost:3000/todos`;

let headers = { 'Content-Type': 'application/json', };
const token = cookie.load('token');

export function fetchTasks(user_id){
return function(dispatch, getState) {
let body = JSON.stringify({ token: token });
headers['Authorization'] = `Bearer ${token}`;

axios.get(`${API_URL}`, { headers, body })
  .then(res => {
    if (res.status === 200) {
      dispatch({ type: 'GET_TASKS', payload: res.data });
    }
  })
  .catch(e => {
    console.error("error: ", e);
  })
}
}

export function deleteTask(id){
return function(dispatch, getState) {
let body = { token: token };
axios.delete(`${API_URL}/${id}`, { params: body, headers: headers })
  .then(res => {
    dispatch({ type: 'DELETE_TASK', payload: id });
  })
  .catch(id => {
    console.error("error", id);
  })
 }
}

export function addTask(task){
return function(dispatch, getState) {
let body = JSON.stringify({todo: task, token: token});
console.log(body);
axios.post(API_URL, body, { headers: headers })
  .then(res => {
    dispatch({ type: 'ADD_TASK', payload: res.data });
  })
  .catch(e => {
    console.error(e);
  })
 }
}

 export function completedTask(id, complete){
 return function(dispatch, getState) {
 if (complete === true) {
  complete = false
 } else {
  complete = true
 }
 let task = {id: id, completed: complete};
 let body = {todo: task, token: token};

 axios.patch(`${API_URL}/${task.id}`, body, { headers: headers })
  .then(res => {
    dispatch({ type: 'COMPLITED_TASK', payload: res.data });
  })
  .catch(e => {
    console.error("error: ", e);
  })
 }
 }

 export function sortTasks(sortBy){
 return function(dispatch, getState) {
 let body = JSON.stringify({ token: token, sortByTitle: sortBy.title, sortByAsc: sortBy.asc });
 axios.post(`${API_URL}/sort`, body, { headers: headers })
  .then(res => {
    console.log(res);
    if (res.status === 200) {
      dispatch({ type: 'SORT_BY', payload: sortBy });
      dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: res.data });
    }
  })
  .catch(e => {
    console.error("error: ", e);
  })
 }
 }

 export function editTask(task){
 return function(dispatch, getState) {
 let body = JSON.stringify({todo: task, token: token});
 axios.patch(`${API_URL}/${task.id}`, body, { headers: headers })
  .then(res => {
    dispatch({ type: 'EDIT_TASK', payload: res.data });
  })
  .catch(e => {
    console.error("error: ", e);
  })
}
}