React-redux 사용해보기

npm install react-redux

 

src 폴더에 store.js 생성 후 스토어 작업

//액션
export const increase = (username) => ({ type: 'INCREMENT', payload: username });
export const decrease = () => ({ type: 'DECREMENT' });

//상태
const initstate = {
  num: 0,
  username: '',
};
//액션의 결과를 걸러내는 과정
const reducer = (state = initstate, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { num: state.num + 1, username: action.payload }; //return되면 그걸 호출한 쪽에서 받는게 아니라 return 되는 순간 ui 변경
    case 'DECREMENT':
      return { num: state.num - 1 };
    default:
      return state;
  }
};
export default reducer;

이후 index.js에 입력

const store = createStoreHook(reducer);

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

top.js

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

const Top = () => {
  const { num, username } = useSelector((store) => store);

  return (
    <div className="subContainer">
      <h1>Top</h1>
      번호 : {num}
      이름 : {username}
    </div>
  );
};

export default Top;

bottom.js

import React from 'react';
import '../App.css';
import { useDispatch } from 'react-redux';
import { decrease, increase } from '../store';

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

  return (
    <div className="subContainer">
      <h1>Bottom</h1>
      <button onClick={() => dispatcher(increase('cos'))}>증가</button>
      <button onClick={() => dispatcher(decrease())}>감소</button>
    </div>
  );
};

export default Bottom;

app.js

import './App.css';
import Top from './components/Top';
import Bottom from './components/Bottom';

function App() {
  return (
    <div className="container">
      <h1>최상단 화면</h1>
      <Top />
      <Bottom />
    </div>
  );
}

export default App;