Javascript 如何在useContext中正确使用useReducer？

我一直试图将我的reducer维护在与上下文提供程序相同的文件中。但是，我还没有弄清楚如何在组件文件中使用它

在我的上下文函数中：

const reducer = (state, action) => {
        switch (action.type) {
            case "SET_LOCATION":
                return {...state, location: action.payload}
            case "SET_BUSINESS":
                return {...state, business: action.payload}
            case "SET_DATE":
                return {...state, date: action.payload}
            default:
                return state
            }
    }

const [{location, business, date}, dispatch] = useReducer(reducer, {
        location: "",
        business: "",
        date: "today",
    })

return (
        <ThemeContext.Provider value={{location, business, date, dispatch, reducer}}>
            {props.children}
        </ThemeContext.Provider>
    )

const reducer=（状态、操作）=>{
开关（动作类型）{
案例“设置位置”：
返回{…状态，位置：action.payload}
案例“设置业务”：
返回{…状态，业务：action.payload}
案例“设置日期”：
返回{…状态，日期：action.payload}
违约：
返回状态
}
}
const[{地点，业务，日期}，调度]=useReducer（减速机{
地点：“，
业务：“，
日期：“今天”，
})
返回(
{props.children}
)

在窗体内部的组件处： 我怀疑我没有正确使用dispatch，但无法通过谷歌搜索找到解决方法

const {location, business, date, dispatch, reducer} = useContext(ThemeContext)

     return (
              <form className="booking-form">
                <h1>Book a service</h1>
                <label>
                    Location
                <input 
                    type="text" 
                    name="location"
                    value={location} 
                    onChange={() => dispatch("SET_LOCATION")}    
                />
                </label>
                <br/>
                <br/>
                <label> 
                    Business
                <input 
                    type="text" 
                    name="business"
                    value={business}
                    onChange={() => dispatch("SET_BUSINESS")}
                />
                </label>
                    <h2 className="date">Date</h2>
                <label>
                <input 
                    type="radio"
                    name="date" 
                    value="today"
                    checked={date === "today"}
                    onChange={() => dispatch("SET_DATE")}
                />
                    Today
                </label>
                <label>
                <input 
                    type="radio"
                    name="date" 
                    value="tomorrow"
                    checked={date === "tomorrow"}
                    onChange={() => dispatch("SET_DATE")}
                />
                    Tomorrow
                </label>
                <label>
                <input 
                    type="radio"
                    name="date" 
                    value="other"
                    checked={date === "other"}
                    onChange={() => dispatch("SET_DATE")}
                />
                    Different date
                </label>
                {date === "other" ? <Calendar/> : <TimeGrid/>}
            </form>

const{location，business，date，dispatch，reducer}=useContext（ThemeContext）
返回(
预订服务
位置
调度（“设置位置”）}
/>




生意
调度（“设置业务”）}
/>
日期
发送（“设置日期”）}
/>
今天
发送（“设置日期”）}
/>
明天
发送（“设置日期”）}
/>
不同日期
{date==“其他”？：}

您的reducer希望接收字段类型为

的对象：

const reducer=（状态、操作）=>{
开关（动作类型）{
//我们在这里检查字段类型
...
}

但您传递的只是字符串：

（）=>发送（“设置日期”）

您需要分派一个具有预期结构的action对象，因为您的reducer将收到一个参数
dispatch（）
method作为第二个参数：

（）=>分派（{type:'SET_DATE'，负载：…}）

您还需要提供一些有效负载，因为您的减速机需要：

const reducer=（状态、操作）=>{
返回{…状态，日期：action.payload}
//在这里，我们期望操作对象上有有效载荷字段
}

还有一个改进-请从组件中提取减速机，因为它是一种静态纯函数。
减速机希望接收一个字段类型为
的对象：

const reducer=（状态、操作）=>{
开关（动作类型）{
//我们在这里检查字段类型
...
}

但您传递的只是字符串：

（）=>发送（“设置日期”）

您需要分派一个具有预期结构的action对象，因为您的reducer将收到一个参数
dispatch（）
method作为第二个参数：

（）=>分派（{type:'SET_DATE'，负载：…}）

您还需要提供一些有效负载，因为您的减速机需要：

const reducer=（状态、操作）=>{
返回{…状态，日期：action.payload}
//在这里，我们期望操作对象上有有效载荷字段
}

还有一个改进-请从组件中提取减速机，因为它是一种静态纯功能。
我到底提供了什么有效负载？如果需要用户键入的输入，如何提供有效负载？作为有效负载，您需要提供减速机正在使用的值。例如，对于
SET\u DATE
操作，您需要提供在州的
date
字段中输入的内容。我从您的代码中可以理解，您需要提供
“今天”
、
“明天”
或
“其他”
字符串，具体取决于选择的单选按钮。例如，对于第一台收音机，您应该执行
分派（{type:'SET\u date'，payload:'today'））
我应该提供什么样的有效载荷？如果需要用户键入的输入，如何提供有效载荷？作为有效载荷，您需要提供减速机正在使用的值。例如，对于
SET_DATE
操作，您需要在您的状态的
DATE
字段中提供一些内容。正如我从您的代码中可以理解的那样，您需要根据选择的单选按钮提供
“今天”
、
“明天”
或
“其他”
字符串。例如，对于第一台收音机，您应该执行
发送（{键入：'SET_DATE'，payload:'today'）
（e）=>发送（“SET_BUSINESS”，e.target.value）//在此处发送有效负载，即e.target.value（e）=>发送（“SET_BUSINESS”，e.target.value）//在此处发送有效负载，即e.target.value