Question

我一直试图将我的reducer与Context provider放在同一文件中。但是，我还无法弄清楚如何在组件文件中使用它。

我的Context函数内部：

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 {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>

Answer 1

您的减速器希望接收到一个带有字段type的对象：

const reducer = (state, action) => {
  switch (action.type) {
  // we're checking field type here
  ...
}

但是您只传递了字符串：

() => dispatch("SET_DATE")

您需要分派具有预期结构的操作对象，因为减速器将收到dispatch()方法的参数作为第二个参数：

() => dispatch({ type: 'SET_DATE', payload: ... })

您还需要提供一些有效负载，因为您的减速器会期望它：

const reducer = (state, action) => {
  return {...state, date: action.payload}
  // here we expect payload field on action object
}

另一项改进-请从组件中提取化径器，因为它属于静态纯函数。

如何正确地使用useReducer和useContext？

1 个答案: