Я создал образец для кнопки-переключателя.
Это делается useContext
(сохранение данных) и useReducer
(обработка данных). и он работает нормально.
Ниже приведена ссылка на CodeSandBox о том, как это работает.
version 1
— это просто отправка при нажатии на кнопку.
Затем я создал version 2
переключения. в основном просто поместите отправку в пользовательский хук. но почему-то не работает.
// context
export const initialState = { status: false }
export const AppContext = createContext({
state: initialState,
dispatch: React.dispatch
})
// reducer
const reducer = (state, action) => {
switch (action.type) {
case 'TOGGLE':
return {
...state,
status: action.payload
}
default:
return state
}
}
//custom hook
const useDispatch = () => {
const {state, dispatch} = useContext(AppContext)
return {
toggle: dispatch({type: 'UPDATE', payload: !state.status})
// I tried to do toggle: () => dispatch(...) as well
}
}
// component to display and interact
const Panel = () => {
const {state, dispatch} = useContext(AppContext)
// use custom hook
const { toggle } = useDispatch()
const handleChange1 = () => dispatch({type: 'TOGGLE', payload: !state.status})
const handleChange2 = toggle // ERROR!!!
// and I tried handleChange2 = () => toggle, or, handleChange2 = () => toggle(), or handleChange2 = toggle()
return (
<div>
<p>{ state.status ? 'On' : 'Off' }</p>
<button onClick={handleChange1}>change version 1</button>
<button onClick={handleChange2}>change version 2</button>
</div>
)
}
// root
export default function App() {
const [state, dispatch] = useReducer(reducer, initialState)
return (
<AppContext.Provider value={{state, dispatch}}>
<div className="App">
<Panel />
</div>
</AppContext.Provider>
);
}
Не уверен, что там происходит. но я думаю, что что-то не так с отправленным состоянием.
(Я пробовал, это работает, если полезная нагрузка не обрабатывает состояние, например, какой-то жесткий код, поэтому отправка должна быть запущена в этот момент)
Может ли кто-нибудь дать мне руку? Ценить!!!