如何将 input 与 redux 一起使用？答案

【问题标题】：How to use input together with redux?如何将 input 与 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，对不起，已经是了。文件夹第一次没有加载
好的，我们检查一下

标签： reactjs redux

【解决方案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);

【讨论】：