Question: Trying to go through redux react tutorial and I am wondering where `rootReducer` come from

```
import { createStore } from "redux";
import rootReducer from "./reducers";

export default createStore(rootReducer);

```

Does `combineReducers` auto export `rootReducer`?

<https://codesandbox.io/s/9on71rvnyo?file=/src/redux/store.js>

Second question in

`/components/AddTodo.js`

```
handleAddTodo = () => {
  this.props.addTodo(this.state.input);
  this.setState({ input: "" });
};

```

`handleAddTodo` calls the `addTodo` action

`/redux/actions.js`

```
export const addTodo = content => ({
  type: ADD_TODO,
  payload: {
    id: ++nextTodoId,
    content
  }
});

```

Which just returns an object

But what connects the `addTodo` to the reducer itself in `/reducers/todos.js`?

```
export default function(state = initialState, action) {

  switch (action.type) {
    case ADD_TODO: {

      .....

```

Answer: 
```
handleCityCheckbox = (param1) => {
    const { cityList = [] } = this.state;
    const itemIndex = cityList.indexOf(param1);
    if (itemIndex === -1)) {
      cityList.push(param1);
    } else  {
      cityList = cityList.filter((e, index) => index !== itemIndex)
    }
    this.setState({ cityList });
  };

```
Finished App:

[![enter image description here](https://i.stack.imgur.com/gt3bQ.gif)](https://i.stack.imgur.com/gt3bQ.gif)

Filtering function:

```
 const handleSubmit = (event) => {
    event.preventDefault();
    if (!name) {
      alert("Enter the city name");
      return;
    }
    let tempList = cities.filter(
      (city) => city.toLowerCase() !== name.toLowerCase()
    );

    if (tempList.length === cities.length) {
      tempList.push(name);
      setCities(tempList);
      return;
    } else {
      setCities(tempList);
    }
  };

```

In the above function, we will, first of all, use `filter` function to filter out i.e. delete the city name if it exists and assign it to `tempList`, then we compare the size of `tempList` with main `cities` list, if it's same then it indicates that the city name was not present in the main list so we will push that `name` to `tempList` and update the `cities` state with modified `tempList`, else, we just set the filtered out `tempList`.

Full Example :

```

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [cities, setCities] = useState(["Pune", "Delhi"]);
  const [name, setName] = useState("");
  const handleSubmit = (event) => {
    event.preventDefault();
    if (!name) {
      alert("Enter the city name");
      return;
    }
    let tempList = cities.filter(
      (city) => city.toLowerCase() !== name.toLowerCase()
    );

    if (tempList.length === cities.length) {
      tempList.push(name);
      setCities(tempList);
      return;
    } else {
      setCities(tempList);
    }
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input onChange={(event) => setName(event.target.value)} />
        <button type="submit">Submit</button>
      </form>
      {cities.map((city) => (
        <p>{city}</p>
      ))}
    </div>
  );
}

```

[Codesandbox Link](https://codesandbox.io/s/upbeat-buck-f19fd?file=/src/App.js)