React-Native：提交时调度不起作用

Question

I am trying to do a basic todo list however when I dispatch an action after pressing add it doesn't dispatch.

I've taken the dispatch(todo(todoList)) out of every function and left it in the main ToDo component to do multiple calls on every letter typed into the search box and I can see an update in my redux store in Redux-dev tools so I know my todo works but It won't dispatch() when I try to submit. Please can someone help me.

This is my code:

import {useDispatch } from 'react-redux'
import { todo } from './action/todo'

const ToDo = () => {
    const [todo, setTodo] = useState('')
    const [todoList, setTodoList] = useState([])
    const dispatch = useDispatch()
    
    const handleSubmit = (id , todo) => {
        const newTodoList = todoList.concat({ id: id, val: todo })
        return (
            setTodo(''),
            todo.length === 0
                ? <Text/>
                : setTodoList(newTodoList) // if I put the dispatch here it doesn't work either
        )
    }
    return (
        <View style={styles.addPhotoCont}>
            <TextInput
                placeholder={props.textInputPlaceholder}
                onChangeText={props => setTodo(props)}
                value={todo}
            />
            <TouchableOpacity 
                onPress={() => handleSubmit(Date.now(), todo) && dispatch(todo(todoList))}>
                <Text style={styles.addButton}>Add</Text>
            </TouchableOpacity>
        </View>
    )
}

Answer 1

It looks like you set todo twice, once as an import, and the second time as state. When you call dispatch and pass in todo it is calling the state version.

You should put the dispatch in the handleSubmit function.

Also, looking at the handleSubmit function, the return will not work. You can only return one thing. You can place the other functions above the return statement.

Edit: Code sample below:

import { useDispatch } from 'react-redux'
import { todo } from './action/todo'

const ToDo = (props) => {
    const [todoInputValue, setTodoInputValue] = useState('')
    const dispatch = useDispatch()
    
    const handleSubmit = (todo) => {
        dispatch(todo({id: Date.now(), val: todoInputValue}))
        setTodoInputValue('')
    }
    
    return (
        <View style={styles.addPhotoCont}>
            <TextInput
                placeholder={props.textInputPlaceholder}
                onChangeText={value => setTodoInputValue(value)}
                value={todoInputValue}
            />
            <TouchableOpacity 
                onPress={() => handleSubmit(Date.now())}>
                <Text style={styles.addButton}>Add</Text>
            </TouchableOpacity>
        </View>
    )
}