React 기초 - Redux

설정

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { createStore } from 'redux';
import rootReducer from './redux/reducers/reducers';
import { Provider } from 'react-redux';

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  document.getElementById('root'),
);

ㆍ index.js 파일에서 최상위 App 컴포넌트를 <Provider> 태그로 감싸준다.

ㆍ 또한 store를 createStore() 함수를 통해 생성해주고, <Provider> 태그 내 속성을 통해 설정해준다.

---

action의 정의

export const increase = () => {
  return {
    type: 'INCREMENT',
  };
};

export const decrease = () => {
  return {
    type: 'DECREMENT',
  };
};

ㆍ action이란 상태에 어떠한 변화가 필요하게 될 때 발생하는 것이다.

ㆍ 상태의 변화에 따라 액션 생성 함수를 작성한다.

ㆍ 함수 앞에 export 키워드를 붙여서 다른 파일에서 사용이 가능하도록 한다.

---

reducer의 정의

import { combineReducers } from 'redux';

const initState = {
  value: 1,
};

const counter = (state = initState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        value: state.value + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        value: state.value - 1,
      };
    default:
      return state;
  }
};

const rootReducer = combineReducers({ counter });

export default rootReducer;

ㆍ reducer는 상태의 변화를 일으키는 함수이다.

ㆍ reducer는 현재의 상태와 전달받은 액션을 파라미터로 받아 새로운 상태를 만들어서 반환한다.

---

useSelector

import '../App.css';
import React from 'react';
import { useSelector } from 'react-redux';

const Top = () => {
  const value = useSelector((store) => store.counter.value);

  return (
    <div className="sub-container">
      <h1>Top</h1>
      번호 : {value}
    </div>
  );
};

export default Top;

ㆍ useSelector() 함수를 사용해서 store의 상태에 접근할 수 있다.

---

useDispatch

import '../App.css';
import React from 'react';
import { useDispatch } from 'react-redux';
import * as actions from '../redux/actions/actions';

const Bottom = () => {
  const dispatch = useDispatch();

  return (
    <div className="sub-container">
      <h1>Bottom</h1>
      <button onClick={() => dispatch(actions.increase())}>증가</button>
      <button onClick={() => dispatch(actions.decrease())}>감소</button>
    </div>
  );
};

export default Bottom;

ㆍ useDispatch() 함수를 통해서 액션 생성 함수를 이용해 상태 변화를 일으킨다.

---

GitHub - qlsdud0604/react-basic: 리액트의 기초를 학습하는 공간