React + Redux, useStore, useDispatch

npm install @reduxjs/toolkit react-redux
npm install react

 

App.jsx

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useDispatch, useSelector } from 'react-redux';

// Define slice (슬라이스 정의)
const counterSlice = createSlice({
    name: 'counter',
    initialState: { count: 0 },
    reducers: {
        increment: (state) => {
            state.count += 1;
        },
        decrement: (state) => {
            state.count -= 1;
        }
    }
});

// Export actions (액션 내보내기)
const { increment, decrement } = counterSlice.actions;

// Create store (스토어 생성)
const store = configureStore({
    reducer: counterSlice.reducer
});

// Define component (컴포넌트 정의)
function Counter() {
    const dispatch = useDispatch(); // store 접근
    const count = useSelector((state) => state.count);
    return (
        <div style={{ textAlign: 'center', marginTop: '50px' }}>
            <h1>Counter: {count}</h1>
            <button onClick={() => dispatch(increment())}>Increment</button>
            <button onClick={() => dispatch(decrement())}>Decrement</button>
        </div>
    );
}

// App component (앱 컴포넌트)
function App() {
    return (
        <Provider store={store}>
            <Counter />
        </Provider>
    );
}

export default App;

 

https://stackblitz.com/edit/vitejs-vite-lwoxuq6y?embed=1&file=src%2FApp.jsx