How to port a function to Redux?

Question

React

Practicing with Redux, making a simple todo-list. I started to integrate the whole thing into Redux, and realized that I had not yet fully understood its logic. Generally. There are three main actions:

const mapDispatchToProps = (dispatch) => {
    return {
        addTodo: (todo) => dispatch({ type: 'ADD_TODO', todo: todo }),
        handleChange: (e) => dispatch({ type: 'HANDLE_CHANGE', e: e }),
        handleSubmit: (e) => dispatch({ type: 'HANDLE_SUBMIT', e: e })
    }
}

And their reducers:

const reducerTodoList = (state = initialState, action) => {
    const newState = {...state};

    switch (action.type) {
        case 'DEL_TODO':
            const todos = state.todos.filter(todo => {
                return todo.id !== action.id;
            });
            return {
                todos: todos
            }

        case 'ADD_TODO':
            action.todo = Math.random();
            const todoos = [...state.todos, action.todo]
            return {
                todos: todoos
            }
        
        case 'HANDLE_CHANGLE':
            return {
                content: action.e.target.value
            }
        
        case 'HANDLE_SUBMIT':
            action.e.preventDefault();
            return {
            ...
            }
        
            default:
                return state;
    }
}

And in the case of HANDLE_SUBMIT, confusion arose. In the non-Redux version, the function looked like this:

handleSubmit = (e) => {
    e.preventDefault();
    this.props.addTodo(this.state);
    this.setState({
        content: ''
    })

That is, it called the addTodo function and took the state value as a prop. How to rewrite all this in the case of case 'HANDLE_SUBMIT'?

Answer 1

handleChange and handleSubmit have nothing to do in the reducer. Leave these handlers in the component.