Я практикую перехватчики React и столкнулся с проблемой использования useReducer и функций отправки. Созданная мной функция редуктора вызывается дважды, когда я нажимаю на любую кнопку во ВТОРОЕ время. Мой вывод журнала консоли печатается один раз при первом нажатии любой из кнопок, а после этого на каждой кнопке pu sh он печатается дважды.
Вот мои файлы:
Utils. js
import React, {createContext, useReducer, useContext} from 'react';
const initialState = {
text: 0
}
const StoreContext = createContext(initialState);
const reducer = (state, action) => {
console.log('hello');
switch(action.type) {
case 'add-counter': return {
...state,
text: state.text + 1
}
default:
throw new Error();
}
}
export const StoreProvider = ({children}) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<StoreContext.Provider value={{state, dispatch}}>
{children}
</StoreContext.Provider>
)
}
export const useStore = (store) => {
const {state, dispatch} = useContext(StoreContext);
return {state, dispatch};
}
UserList. js
import React, {useCallback} from 'react';
import { Row, Col, Button } from 'antd';
import TextDisplayComponent from './TextDisplay';
import {useStore} from '../util';
function ListComponent() {
const {dispatch} = useStore();
const increment = useCallback(() => dispatch({type: 'add-counter'}), [dispatch])
return (
<Row>
<Col span={12} style={{textAlign: 'center'}}>
<Button type="primary" onClick={increment}>Press Me</Button>
</Col>
<Col span={12} style={{textAlign: 'center'}}>
<TextDisplayComponent />
</Col>
</Row>
)
}
export default ListComponent;
TextDisplay. js
import React, {useCallback} from 'react';
import {Button} from 'antd'
import {useStore} from '../util'
function TextDisplayComponent() {
const {state, dispatch} = useStore();
const increment = useCallback(() => dispatch({type: 'add-counter'}), [dispatch])
return (
<div>
{state.text}
<Button onClick={increment}>Add</Button>
</div>
)
}
export default TextDisplayComponent
Приложение. js
import React from 'react';
import UserListComponent from './components/UserList';
import 'antd/dist/antd.css';
import {StoreProvider} from './util';
function App() {
React.createContext()
return (
<StoreProvider>
<div className="App">
<UserListComponent />
</div>
</StoreProvider>
);
}
export default App;
Может кто-нибудь помочь, пожалуйста? Спасибо.
Полный тестовый проект можно найти на https://github.com/Saro-DA/my-app.git