[ React ] Redux 기본

Redux

props를 사용하지 않고, 데이터를 전달할 수 있는 redux를 사용하는 기본방법입니다.

 

npm

$ npm install redux
$ npm install react-redux

 

js/reducer.js

const Reducer = ( currentState, action ) => {

    // currentState가 없을때 ( 최초상태 )
    if (currentState === undefined) {
        return {
            number: 1
        }
    }

    const newState = { ...currentState };

    if (action.type === "PLUS") {
        newState.number = action.num;
    }

    return newState;
};

export default Reducer;

 

App.js

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import { legacy_createStore as createStore } from 'redux';
import { Provider } from 'react-redux';
import Reducer from './js/reducer';

import Main from './components/Main';

const store = createStore(Reducer);

function App() {

  return (
    <Router>
      <Provider store={store}>
        <Routes>
            <Route path="/" element={<Main />} />
        </Routes>
      </Provider>
    </Router>
  );
}

export default App;

 

 

components/Main.js

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

const Main = () => {

    const dispatch = useDispatch();
    const [num, setNum] = useState(0);

    const number = useSelector(state => state.number);

    const onDispatch = () => {
        dispatch({ type: "PLUS", num: num})
    };
    
    return (
        <section>
            숫자 !!! : {number}

            <input type="number" value={num} onChange={(e) => setNum(e.target.value)} />
            <button onClick={onDispatch}>변환!</button>
        </section>
    );
}