Reactjs 如何使用减速机返回的值

我有点麻烦，如果有人能帮我，那就太棒了

所以，我使用react hooks和redux创建这个应用程序，我想使用我存储在数据库中的值来执行一些操作，比如console.log这个json或只是id。存储在数据库中的部分和所有这些都是可以的，但我只是不知道如何在从dispatch（addReport）返回后在react组件中使用它（新报告）

抱歉，如果这是个愚蠢的问题

我的组件NewReport.js

import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { getEmployees } from '../../actions/employees'
import { getTypeContracts } from '../../actions/typeContract'
import { addReport } from '../../actions/reports'


export default function NewRegister() {
    const [newReportState, setNewReportState] = useState({
        employee: "",
        typeContract: "",
        initialDate: "",
        finalDate: ""
    })
    const [reportState, setReportState] = useState({
        id:"",
        employee: "",
        typeContract: "",
        initialDate: "",
        finalDate: ""
    })

    const dispatch = useDispatch()
    useEffect(() => {
        // get employees for select input
        dispatch(getEmployees())
        // get type of contracts for select input
        dispatch(getTypeContracts())
    }, [])
    const employees = useSelector(state => state.employees.employee)
    const typeContracts = useSelector(state => state.typeContracts.typeContract)
    const reports = useSelector(state => state.reports.report)

    // send values from the form to state
    const handleChange = e => {
        const { name, value } = e.target
        // for verification of the change of the state, aways console.log outside this function
        setNewReportState({
            ...newReportState,
            [name]: value
        })
    }


    // submit the form
    function sendReportToStorage(newReport){
        dispatch(addReport(newReport))
        // IT'S HERE THAT I WANT TO DO SOME ACTION
    }

    function handleSubmit(e) {
        e.preventDefault()
        // grab the values from the state
        const { employee, typeContract, initialDate, finalDate } = newReportState
        const newReport = { employee, typeContract, initialDate, finalDate }
        //console.log(newReport)
        // to do -> if the values in newReport != initial Report
        sendReportToStorage(newReport)
    }        
    return (
        <div className="content">
            <h1 className="title-page">New Report</h1>
            <form onSubmit={handleSubmit} >
                <div className="form-input">
                    <label>Employee</label>
                    <select id="employees" name="employee" onChange={handleChange}>
                        <option value="0"></option>
                        {employees.map(employee => (
                                <option value={employee.id} key={employee.id}>{employee.name} - {employee.function}</option>
                            ))}
                    </select>
                    <button className="add-button">+</button>
                </div>
                <div className="form-input">
                    <label>Type of contract</label>
                    <select id="typeContract" name="typeContract" onChange={handleChange}>
                        <option value="0"></option>
                        {typeContracts.map(typeContract => (
                            <option value={typeContract.id} key={typeContract.id}>{typeContract.description}</option>
                        ))}
                    </select>
                    <button className="add-button">+</button>
                </div>
                <div className="form-input">
                    <label>Initial date</label>
                    <input type="date" name="initialDate" onChange={handleChange} />
                </div>
                <div className="form-input">
                    <label>Final date</label>
                    <input type="date" name="finalDate" onChange={handleChange} />
                </div>
                <button className="submit-button">New Report</button>
            </form>
        </div>
    )
}

My reports.js reducer->我认为应该在这里为react组件返回一些值

import { GET_REPORTS, DELETE_REPORT, ADD_REPORT } from '../actions/types.js'


const initialState = {
    report: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case GET_REPORTS:
            return {
                ...state,
                report: action.payload
            }
        case DELETE_REPORT:
            return {
                ...state,
                report: state.report.filter(report => report.id !== action.payload)
            }
        case ADD_REPORT:
            return {
                ...state,
                report: [...state.report, action.payload]
            }
        default:
            return state
    }
}

---

如果我没弄错的话，你想在任何时候做点什么

现在，如果您的

addReport

正在工作，则任何时候它都会添加report

const reports=useSelector（state=>state.reports.report）

将

报告指定为存储区中的当前数据。因此



问题是，这种效果将在每次修改
报告时运行，而不仅仅是在添加时

因此，您可以创建一个特殊的标志来检查是否确实添加了post


Hello mate，谢谢你的回答，是这样的，但在NewReport.js中，我必须将用户重定向到创建的报告的某些“详细信息”页面，如果你知道这样做的方法会很神奇。你可以使用
history。在“sendReportToStorage”中或在
Useffect
（假设您使用react router dom）很好，谢谢您的提示，但我有一个疑问，在您的回答中，我应该将所有这些写在reducer（report.js）中，然后写在react组件（NewReport.js）中将看到状态中的更改并触发具有useeffect的操作？Redux操作假定仅在reducer上操作数据。如果要在react部分执行某些操作，实际上是通过存储中更改触发的效果来执行。但是创建标志以确定更改是否确实是在添加报告或删除/添加，这是唯一的选项有几种方法可以这样做，我只是觉得这是最方便的
import { GET_REPORTS, DELETE_REPORT, ADD_REPORT } from '../actions/types.js'


const initialState = {
    report: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case GET_REPORTS:
            return {
                ...state,
                report: action.payload
            }
        case DELETE_REPORT:
            return {
                ...state,
                report: state.report.filter(report => report.id !== action.payload)
            }
        case ADD_REPORT:
            return {
                ...state,
                report: [...state.report, action.payload]
            }
        default:
            return state
    }
}

useEffect(() => console.log(reports),[reports])

 const { report, isReportAdded } = useSelector(state => state.reports)     
 useEffect(() => {
    if (isReportAdded) {
         console.log(report)
         dispatch(...) // create function to set isReportAdded to false
    }}
   ,[report, isReportAdded])






   const initialState = {
     report: [],
     isReportAdded: false
   }

   export default function (state = initialState, action) {
    switch (action.type) {
      case GET_REPORTS:
        return {
            ...state,
            report: action.payload
        }
       case DELETE_REPORT:
         return {
            ...state,
            report: state.report.filter(report => report.id !== action.payload)
        }
       case ADD_REPORT:
         return {
            ...state,
            report: [...state.report, action.payload],
            isReportAdded: true
        }
      default:
        return state
      }
     }