🗃️ Redux 제대로 이해하기 - Store, Action, Reducer, Dispatch

import { createStore, combineReducers } from "redux";
import { counterReducer } from './counterReducer';

const rootReducer = combineReducers({
  counter: counterReducer
});

export const store = createStore(rootReducer);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <Counter />
  </Provider>
);

const incrementAction = {
  type: 'INCREMENT',
  payload: 1
};

const counterReducer = (state = { value: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + action.payload };
    default:
      return state;
  }
};

import { useDispatch, useSelector } from "react-redux";

const Counter = () => {
  const dispatch = useDispatch();
  const count = useSelector((state) => state.counter.value);
  
  const incrementAction = {
    type: 'INCREMENT',
    payload: 1
  };
  
  const handleClick = () => {
    dispatch(incrementAction);
  };
  
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={handleClick}>+1 증가</button>
    </div>
  );
};

export default Counter;