首页 > 解决方案 > React + Redux + Hook,状态更新出错

问题描述

我正在使用 React JS、Hooks 和 redux 创建一个简单的 Todo 应用程序。按照下面的代码为什么我不能更新状态和检索数据?当我提交输入字段时,它不会显示错误,但我无法从 Redux state 检索数据。大多数情况下,使用 useSelector 函数和 initialState 可能会出错。

# necessary imports,omitted for readers ease.

function FormComp() {
    const dispatch = useDispatch()

    const [inputdata,setInputdata] = useState('')

    const handlesubmit =(e)=>{e.preventDefault();
                                dispatch(allActions.formAction.addTodo(inputdata))
    }
    const addtodo = useSelector(state=>state.todo) 

    return (
        <div>
            <form>
                <input  onChange={(e)=>setInputdata(e.target.value)} value={inputdata} />
                <button onClick={handlesubmit}> submit </button>
            </form>

            {console.log(addtodo)} # console shows undefined 

        </div>
    )
}

export default FormComp

减速机功能

import { ADDTODO } from "../constants/types";

const initialState={todo:'no todos'}

const toDos = (state=initialState,action)=>{
    switch(action.type){
        case ADDTODO:return{
            ...state,todo:action.payload
                     }
        default:return state        
    }
}


export default toDos

动作功能

import { ADDTODO } from "../constants/types"


const addTodo=(todo)=>{return {
    type:ADDTODO,
    payload:todo
}}


export default{
    addTodo
}

标签: javascriptreactjsreduxreact-hooks

解决方案


推荐阅读