如何将输入与 redux 一起使用？

Question

我需要你的帮助。我正在尝试使用 redux 制作一个待办事项应用程序。现在我尝试通过 redux 从输入渲染数据。单击按钮时无法创建和绘制项目。你能帮我完成这个任务吗，因为我不知道如何在 redux 中使用输入？无论如何，这里有一个link项目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)

Answer 1

我检查了你的repo，问题在这里：

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

export let root_reducer = combineReducers({
  todo_reducer,
});

如上面的 combineReducers，你的状态形状将是这样的：

state = {todo_reducer: { allTasks: [] } }

因此，要解决您的问题，请像这样更新任务组件中的 useSelector：

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

如何将输入与 redux 一起使用？

How to use input together with redux?

reactjs

redux