[React] Redux?

*설치 :

툴킷

npm install @reduxjs/toolkit react-redux

 

일반

 npm install redux@4.1.2 react-redux

*세팅(1) : store.js 파일을 만들고 코드 복붙

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

*세팅(2) : index.js 파일로 가서 Provider라는 컴포넌트에 import, 그리고 밑에 <Provider store={import해온거}> 이걸로 <App/> 을 감싸준다.

import { Provider } from "react-redux";
import store from './store.js'

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

---

리덕스 ?

데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주는 라이브러리

 

용어

• Action 
  • 👉 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 쓴다. 
  • dispatch 사용할때 () 안에 액션객체를 넣을때 필요

   // 액션은 객체예요. 이런 식으로 쓰인다. type은 이름같은거! 저희가 정하는 임의의 문자열을 넣는다
      {type: 'CHANGE_STATE', data: {...}}

•  ActionCreator
  • 👉 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 쓴다. 

const PLUS_ONE = "PLUS_ONE"; // value는 상수로 생성

// 액션객체를 반환하는 함수 생성
// export 가 붙는 이유는 plusOne()는 밖으로 나가서 사용될 예정이기 때문입니다.
export const plusOne = () => { 
  return {
    type: PLUS_ONE, // type에는 위에서 만든 상수로 사용 (vscode에서 자동완성 지원)
  };
};

// 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다. 
      return {
        number: state.number + 1,
      };
    case MINUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다. 
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};

• Reducer 
  
  • 👉 리덕스에 저장된 데이터를 변경하는 함수 
  • 액션 생성 함수를 부름 > 액션을 만듬 > 리듀서가 현재 데이터와 액션 객체를 받음 > 새로운 데이터를 만듬 > 리턴

    // 기본 상태값을 임의로 정해줬어요.
    const initialState = {
    	name: 'woo0'
    }
    
    function reducer(state = initialState, action) {
    	switch(action.type){
    
    		// action의 타입마다 케이스문을 걸어주면, 
    		// 액션에 따라서 새로운 값을 돌려줌
    		case CHANGE_STATE: 
    			return {name: 'woo1'};
    
    		default: 
    			return false;
    	}	
    }

• Store
  • 👉 스토어에는 리듀서, 애플리케이션, 리덕스에서 값을 가져오고, 액션을 호출하기 위한 내장 함수가 포함 됨
• useDispatch
  • 👉  액션 객체 보낼때 쓰는 함수

// src/App.js

import React from "react";
import { useDispatch } from "react-redux"; /1/ import 해주세요.

const App = () => {
  const dispatch = useDispatch(); /2/ dispatch 생성
  return (
    <div>
      <button
				/3/ 이벤트 핸들러 추가
        onClick={() => {
					// 마우스를 클릭했을 때 dispatch가 실행되고, ()안에 있는 액션객체가 리듀서로 전달된다.
          dispatch({ type: "PLUS_ONE" }); 
        }}
      >
				+ 1
      </button>
    </div>

• useSelector 
  • 👉 컴포넌트에 스토어를 조회 할때 쓰는 함수 
• payload
  • 액션객체에 목적어도 같이 담아 보내주는 것
• Duck 구조 

예시 ) 

const ADD_NUBER = 'ADD_NUMBER';
const MINUS_NUMBER = 'MINUS_NUMBER';

export const addNumber = (payload) => {
  return {
    type: ADD_NUBER,
    payload,
  };
};

export const minusNumber = (payload) => {
  return {
    type: MINUS_NUMBER,
    payload,
  };
};

const initialState = {
  number: 0,
};

const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUBER:
      return {
        number: state.number + action.payload,
      };

    case MINUS_NUMBER:
      return {
        number: state.number - action.payload,
      };

    default:
      return state;
  }
};

export default counter;

import React from 'react';
import { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addNumber, minusNumber } from './redux/modules/counter';

const Redux = () => {
  const dispatch = useDispatch();
  const [number, setNumber] = useState(0);
  const globalNumber = useSelector((state) => state.counter.number);

  const onChangeHandler = (e) => {
    const { value } = e.target;
    setNumber(+value);
  };
  const onClickAddNumberHandler = () => {
    dispatch(addNumber(number));
  };

  const onClickMinusNumberHandler = () => {
    dispatch(minusNumber(number));
  };
  console.log(number);
  return (
    <div>
      <div>{globalNumber}</div>
      <input type="number" onChange={onChangeHandler} />
      <button onClick={onClickAddNumberHandler}>더하기</button>
      <button onClick={onClickMinusNumberHandler}>빼기</button>
    </div>
  );
};

export default Redux;