如何将 input 与 redux 一起使用？

Posted 2023-02-19

【中文标题】如何将 input 与 redux 一起使用？

【英文标题】：How to use input together with redux?

【发布时间】：2022-01-15 20:39:30

【问题描述】：

我需要你的帮助。我正在尝试使用 redux 制作一个待办事项应用程序。现在我尝试通过 redux 从输入中渲染数据。单击按钮时，我无法创建和绘制项目。 你能帮我完成这个任务吗，因为我不知道如何在 redux 中使用输入？无论如何，这里是项目的链接https://github.com/Dmytrii9Cherniak/inputs_redux 谢谢

import React, useState from "react";
import useDispatch, useSelector from "react-redux";
import ADD_TODO from "../Redux/Action_Types";

export let Tasks = () => 

let tasks = useSelector(state => state.tasks);
const dispatch = useDispatch();
const [addTask, setNewTask] = useState('');
const handleInput = (e) => 
    setNewTask(e.target.value)

const handleButton = () => 
    dispatch(
        type: ADD_TODO,
        payload: 
            id: Date.now(),
            label: addTask
        
    )

return (<div>
        <input
            value=addTask
            onChange=handleInput
        />
        <button onClick=handleButton>Create Todo</button>

        tasks.map(el => <div key=el.id>el.label</div>)

        </div>)

Todo_Reducer.js

import ADD_TODO, DELETE_TODO from "./Action_Types";

const initialState = 
allTasks : []


const todo_reducer = (state = initialState, action) => 
switch (action.type) 

case ADD_TODO: 
        return 
            ...state,
            allTasks: [...state.allTasks, action.payload]
        


case DELETE_TODO: 
        return 
            ...state,
            allTasks: state.allTasks.filter(task => task.id !== action.payload)
        
    

default:
        return state;

   

All_Reducers.js

import combineReducers from "redux";
import todo_reducer from "./Todo_Reducer";

export let root_reducer = combineReducers(
todo_reducer
)

Action_types.js

let ADD_TODO = 'ADD_TODO'
let DELETE_TODO = 'DELETE_TODO'

export ADD_TODO, DELETE_TODO

Store.js

import createStore from "redux";
import root_reducer from "./All_Reducers";

export let store = createStore(root_reducer)

【问题讨论】：

你所说的“绘画”物品是什么意思？

@jmargolisvt，创建并显示在页面中

在你介绍的github repo中，没有任何与redux相关的代码

@SaeedShamloo，对不起，已经是了。文件夹第一次没有加载

好的，我们检查一下

【参考方案1】：

我检查了你的仓库，问题就在这里：

// All_Reducers.js
import  combineReducers  from 'redux';
import todo_reducer from './Todo_Reducer';

export let root_reducer = combineReducers(
  todo_reducer,
);

和上面的 combineReducers 一样，你的 state 形状会是这样的：

state = todo_reducer:  allTasks: []  

所以，要解决您的问题，请在 Tasks 组件中更新您的 useSelector，如下所示：

let tasks = useSelector((state) => state.todo_reducer.allTasks);