React
10
Вклад в тег
И пытаюсь вызвать ее из pushForm()
// Custom hook
export const useAuthHandler = () => {
const [token, setToken] = useState(null);
useEffect(() => {
if (token) { // чтобы не диспатчить с начальным null на первом рендере
// диспатчим экшн с полученным токеном
}
}, [token]); // будет следить за token
return () => { // возвращаем функцию-обработчик
// запрашиваем токен, в then вызываем setToken(token)
};
};
// Component
export default function LoginUser() {
const handleSubmit = useAuthHandler();
return (
<div>
<form id="auth_form">
{/* ... */}
<Button autofocus="true" onClick={handleSubmit}>Авторизоваться</Button>
</form>
</div>
);
};
но при создании функции отметки дела галочкой...
export const todoReducer = (state, action) => {
switch (action.type) {
// ...
case "MARK_TODO":
const newState = state.map(todo => {
if (todo.id === action.id) {
return { ...todo, status: !todo.status };
}
return todo;
});
return newState;
// ...
}
};
...запускается будто "из воздуха".
Будто любое действие кроме 'ADD_TODO' заранее проклято.
index.js
и убираете обёртку над <App />
. data
в контекст, ну и обращаться где захочется с помощью useContext
.const AppMessageItems = () => {
const { id } = useParams(); // react-router-dom hook
const subset = useContext(YourContextName).find(item => item.id === id);
return (
<Container>
<div> Id: {subset.id}</div>
<div> Text: {subset.text}</div>
...
</Container>
);
};
const Form = props => {
const [localData, setLocalData] = useState();
useEffect(() => {
setLocalData(props.reduxData);
}, [props.reduxData]);
return (
// ...
);
};
return
, через onChange
на полях вашей формы, обновляете локальный стэйт. По сабмиту формы или еще как-нибудь, диспатчите экшн с актуальными данными из локального стэйта.