const mapState = (state) => ({
  todos: selectFilteredTodos(state)
})

const mapDispatch = (dispatch) => (
  bindActionCreators({ addTodo, toggleTodo }, dispatch)
)

function TodoList({ todos, addTodo, toggleTodo }) {
  // render
}

export default connect(mapState, mapDispatch)(TodoList);

function TodoList() {
  const todos = useSelector(selectFilteredTodos);
  const dispatch = useDispatch();

  // render
}

// Split across constants/todos.js, actions/todos.js, reducers/todos.js
export const ADD_TODO = 'ADD_TODO'

export const addTodo = (id, text) => ({
  type: ADD_TODO, text, id
})

export default function todosReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO: {
      return state.concat({
        id: action.id, text: action.text, completed: false 
      })
    }
  }
}

const todosSlice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    },
  },
});

export const { addTodo } = todosSlice.actions;
export default todosSlice.reducer;