1.   redux 설치

&  yarn add redux react-redux

 

 

 

2. createStore  deprecate 로 인하여   React Redux Toolkit  설치

$  yarn add @reduxjs/toolkit

또느

$ npm install @reduxjs/toolkit react-redux

 

 

3. index.js  

다음 라이브러리  import  및 configureStore  설정

import { Provider } from "react-redux";
import rootReducer from "./store";
import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({ reducer: rootReducer })

 

<Provider store={store}> </Provider> 추가

 

index.js   전체 소스

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


import { Provider } from "react-redux";
import rootReducer from "./store";
import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({ reducer: rootReducer })

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>

    <Provider store={store}>
      <App />
    </Provider>

  </React.StrictMode>
);



reportWebVitals();

 

 

4. store.js

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

//상태
const initstate = {
    number: 1,
    hello: 8,
    username: 'ssar'
}


//액션의 결과를 걸러내는 친구
const rootReducer = (state = initstate, action) => {

    switch (action.type) {
        case "INCREMENT":
            return { number: state.number + 1, username: action.payload }; //return 되면 호출한 쪽에서 받는 것이 아니라 return 되는 순가 Ui 변경 

        case "DECREMENT":
            return { number: state.number - 1 };
        case "DATAINFO":
            return { username: state.username }
        default:
            return state;
    }
}

export default rootReducer;

 

 

 

5. 사용

Top.js

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


const Top = () => {
    const { number, hello, username } = useSelector((store) => store);
    //const number = useSelector((state) => state.number);

    return (
        <div className='sub_container'>
            <h1>Top</h1>
            번호 : {number}
            <br />
            이름 :{username}
        </div>
    );
};

export default Top;

 

Bottom.js

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

const Bottom = () => {

    const dispatcher = useDispatch();

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

export default Bottom;

 

 

https://github.com/braverokmc79/React-SpringBoot-1/commit/d9a6a7b2f08f772e1d683fb99668ad76914c6ec7