Use redux-starter-kit on visibilityFilter

src/actions/index.js

@@ -1,9 +1,9 @@
-import * as types from '../constants/ActionTypes'
+import { createAction } from "redux-starter-kit";
+import * as types from "../constants/ActionTypes";
 
-export const addTodo = text => ({ type: types.ADD_TODO, text })
-export const deleteTodo = id => ({ type: types.DELETE_TODO, id })
-export const editTodo = (id, text) => ({ type: types.EDIT_TODO, id, text })
-export const completeTodo = id => ({ type: types.COMPLETE_TODO, id })
-export const completeAllTodos = () => ({ type: types.COMPLETE_ALL_TODOS })
-export const clearCompleted = () => ({ type: types.CLEAR_COMPLETED })
-export const setVisibilityFilter = filter => ({ type: types.SET_VISIBILITY_FILTER, filter})
+export const addTodo = text => ({ type: types.ADD_TODO, text });
+export const deleteTodo = id => ({ type: types.DELETE_TODO, id });
+export const editTodo = (id, text) => ({ type: types.EDIT_TODO, id, text });
+export const completeTodo = id => ({ type: types.COMPLETE_TODO, id });
+export const completeAllTodos = () => ({ type: types.COMPLETE_ALL_TODOS });
+export const clearCompleted = () => ({ type: types.CLEAR_COMPLETED });

src/constants/ActionTypes.js

@@ -1,7 +1,6 @@
-export const ADD_TODO = 'ADD_TODO'
-export const DELETE_TODO = 'DELETE_TODO'
-export const EDIT_TODO = 'EDIT_TODO'
-export const COMPLETE_TODO = 'COMPLETE_TODO'
-export const COMPLETE_ALL_TODOS = 'COMPLETE_ALL_TODOS'
-export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'
-export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'
+export const ADD_TODO = "ADD_TODO";
+export const DELETE_TODO = "DELETE_TODO";
+export const EDIT_TODO = "EDIT_TODO";
+export const COMPLETE_TODO = "COMPLETE_TODO";
+export const COMPLETE_ALL_TODOS = "COMPLETE_ALL_TODOS";
+export const CLEAR_COMPLETED = "CLEAR_COMPLETED";

src/containers/FilterLink.js

@@ -1,18 +1,20 @@
-import { connect } from 'react-redux'
-import { setVisibilityFilter } from '../actions'
-import Link from '../components/Link'
+import { connect } from "react-redux";
+import { visibilityFilter } from "../ducks";
+import Link from "../components/Link";
+
+const { setVisibilityFilter } = visibilityFilter.actions;
 
 const mapStateToProps = (state, ownProps) => ({
   active: ownProps.filter === state.visibilityFilter
-})
+});
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
   setFilter: () => {
-    dispatch(setVisibilityFilter(ownProps.filter))
+    dispatch(setVisibilityFilter(ownProps.filter));
   }
-})
+});
 
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(Link)
+)(Link);

src/ducks/index.js

@@ -0,0 +1 @@
+export * from "./visibilityFilter";

src/ducks/visibilityFilter.js

@@ -0,0 +1,10 @@
+import { createSlice } from "redux-starter-kit";
+import { SHOW_ALL } from "../constants/TodoFilters";
+
+export const visibilityFilter = createSlice({
+  slice: "visibilityFilter",
+  initialState: SHOW_ALL,
+  reducers: {
+    setVisibilityFilter: (state, action) => action.payload
+  }
+});

src/reducers/index.js

@@ -1,10 +1,10 @@
-import { combineReducers } from 'redux'
-import todos from './todos'
-import visibilityFilter from './visibilityFilter'
+import { combineReducers } from "redux";
+import todos from "./todos";
+import { visibilityFilter } from "../ducks";
 
 const rootReducer = combineReducers({
   todos,
-  visibilityFilter
-})
+  visibilityFilter: visibilityFilter.reducer
+});
 
-export default rootReducer
+export default rootReducer;

src/selectors/index.js

@@ -1,31 +1,33 @@
-import { createSelector } from 'reselect'
-import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters'
+import { createSelector } from "redux-starter-kit";
+import { visibilityFilter } from "../ducks";
+import {
+  SHOW_ALL,
+  SHOW_COMPLETED,
+  SHOW_ACTIVE
+} from "../constants/TodoFilters";
 
-const getVisibilityFilter = state => state.visibilityFilter
-const getTodos = state => state.todos
+const { getVisibilityFilter } = visibilityFilter.selectors;
+
+const getTodos = state => state.todos;
 
 export const getVisibleTodos = createSelector(
   [getVisibilityFilter, getTodos],
   (visibilityFilter, todos) => {
     switch (visibilityFilter) {
       case SHOW_ALL:
-        return todos
+        return todos;
       case SHOW_COMPLETED:
-        return todos.filter(t => t.completed)
+        return todos.filter(t => t.completed);
       case SHOW_ACTIVE:
-        return todos.filter(t => !t.completed)
+        return todos.filter(t => !t.completed);
       default:
-        throw new Error('Unknown filter: ' + visibilityFilter)
+        throw new Error("Unknown filter: " + visibilityFilter);
     }
   }
-)
+);
 
 export const getCompletedTodoCount = createSelector(
   [getTodos],
-  todos => (
-    todos.reduce((count, todo) =>
-      todo.completed ? count + 1 : count,
-      0
-    )
-  )
-)
+  todos =>
+    todos.reduce((count, todo) => (todo.completed ? count + 1 : count), 0)
+);