[react] Redux

설치

npm install react-redux
yarn add redux react-redux

숫자 증가시키기 예제

• Redux를 사용하지 않을 경우

두 개의 컴포넌트에서 각각 하나는 숫자를 보여주고, 나머지 하나는 숫자를 증가시키는 역할을 한다.

App.js에서 두개의 컴포넌트에 각각의 변수와 함수를 넘겨준다.

App.js

import Bottom from "./components/Bottom";
import Top from "./components/Top";
import React, { useState } from "react";
import "./App.css";

function App() {
  const [number, setNumber] = useState(1);
  const addNumber = () => {
    setNumber(number + 1);
  }
  return (
    <div className="container">
      <h1>최상단 화면</h1>
      <Top number={number} />
      <Bottom addNumber={addNumber} />
    </div>
  );
}

export default App;

Top.js

import React from 'react';

const Top = (props) => {
    const {number} = props;
    return (
        <div className='sub_container'>
            <h1>top</h1>
            번호:{number}
        </div>
    );
};

export default Top;

Bottom.js

import React from 'react';

const Bottom = (props) => {
    const { addNumber } = props;
    return (
        <div className='sub_container'>
            <h1>bottom</h1>
            <button onClick={addNumber}>증가</button>
        </div>
    );
};

export default Bottom;

• redux를 사용할 경우

store를 만든다.

store.js

//액션
export const increase = () => ({ type: "INCREMENT" });
export const decrease = () => ({ type: "DECREMENT" });
//상태
const initstate = {
    number:0
}
//액션의 결과를 걸러낸다.
const reducer = (state = initstate, action) => {
    switch (action.type) {
        case "INCREMENT":
            return { number: state.number + 1 };//return되는 순간 UI가 변경
           
        case "DECREMENT":
            return { number: state.number - 1 };
           
        default:
            return state;
    }
}
export default reducer;

index.js에서 store를 모든 react 컴포넌트에 전달한다. react-redux의 Provider를 사용한다.

index.js

import { createStore } from "redux";
import { Provider } from "react-redux";
import reducer from './Store';

const store = createStore(reducer);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
    
  
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <https://bit.ly/CRA-vitals>
reportWebVitals();

Top.js

import React from 'react';
import { useSelector } from 'react-redux';

const Top = () => {
    const number = useSelector((store) => store.number);
    return (
        <div className='sub_container'>
            <h1>top</h1>
            번호:{number}
        </div>
    );
};

export default Top;

Bottom.js

import React from 'react';
import { useDispatch } from 'react-redux';
import { increase } from "../Store.js";

const Bottom = () => {
    const dispatcher = useDispatch();
    return (
        <div className='sub_container'>
            <h1>bottom</h1>
            <button onClick={() => dispatcher(increase())}>증가</button>
        </div>
    );
};

export default Bottom;