React-Native visibility filter won't work?

Question

I'm currently trying to create a "TodoApp" using react-native and redux. I got the part where I can add and toggle different tasks working but I can't seem to get the visibility filter (show all/completed/active) in place.

Here's the relevant code of the TaskListContainer:

import { connect } from 'react-redux';
import TaskListComponent from '../components/TaskListComponent';
import {visibilityFilters} from "../actions/actionTypes";

const getVisibleTodos = (tasks, filter) => {
switch (filter) {
    case visibilityFilters.SHOW_ALL:
        return tasks;
    case visibilityFilters.SHOW_COMPLETED:
        return tasks.filter(t => t.completed);
    case visibilityFilters.SHOW_ACTIVE:
        return tasks.filter(t => !t.completed);
    default:
        return null;
}
}

const mapStateToProps = (state) => {
return {
    //tasks: !state.taskReducers ? [] : state.taskReducers
    tasks: getVisibleTodos(state.tasks, state.visibilityFilter)
};

};

const TaskListContainer = connect(mapStateToProps, null)(TaskListComponent);
export default TaskListContainer;

If the initial state is "SHOW_ALL" the app is working but whenever i add a new item it doesn't get displayed. If the state switches to "SHOW_COMPLETED" or "SHOW_ACTIVE" the app just crashes: "cannot read property 'filter' of undefined".

Every tutorial I've watched/read uses this "getVisibleTodos" function and it's working. Why wouldn't it for me?

Answer 1

I made a work-around this problem. Instead of putting the getVisibleTodos function inside the Container I put it inside the Component , filtering the data after fetching it from the store and not just fetching the ones i was using. It a bit more inefficient but it works.

Answer 2

其实我不认为有必要这样做，我已经将其移至TaskListContainer它按预期运行正常，请参见此处： https : //codesandbox.io/s/1ok4k5vro3