<React> redux

👩🏼‍🌾👩🏼‍🌾 리덕스툴킷 포스팅보러가기!!

redux toolkit이 나오기 전, Redux를 세팅하고 적용하는 방법에 대해 포스팅해보겠다
함께 Redux toolkit과의 차이점에 대해 알아보겠다!

Redux 설치

Redux를 js에서 사용하기 위한 설치
npm install @reduxjs/toolkit

Redux를 React에서 사용하기 위한 설치
npm install react-redux

redux와 react를 위한 redux한번에 설치
npm install redux react-redux

1. 아래와 같이 scr폴더에 redux폴더를 따로 생성해주고 store.js파일과 reducer폴더를 만들어 기본세팅을 해준다

   

2. index.js파일에 가서 Provider라는 컴포넌트와 1번에서 작성한 store.js파일을 import한다
   <App/>을 <Provider store={import해온것}></Provider>으로 감싼다
   이제 <APP>과 자식 컴포넌트들은 store.js에 있는 state를 맘대로 꺼내쓸게 있게 된다

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

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

Redux 구조

• reducer는 자동으로 dispatch가 던진 액션을 받아올 수 있다
• useSelector을 이용해서 store로 부터 값을 들고온다

store.js

import { createStore } from 'redux';  //툴킷의 경우-import {configureStore} from "@reduxjs/toolkit"
import reducer from './reducer/reducer'; 

let store = createStore(reducer);

export default store;

reducer.js

let initialState = {
  count: 0,
};

function reducer(state = initialState, action) {}

export default reducer;

reducer은 회사 내규에 따라 if문 아니면 switch문을 사용한다

//reducer.js

//if문일경우
function reducer(state = initialState, action) {
  if (action.type === 'INCREMENT') {
    return { ...state, count: state.count + 1 }; //...문법을 통해 기존 객체내용을 복사해 새로운 객체에 전달가능
  }

  return { ...state };
}

//switch문일경우
function reducer(state=initialState, action){
	switch(action.type){
  case "INCREMENT":
  return{ ...state,count:state.count+1}
  default:
    return {...state}
}
}

EX)Redux를 이용해서 counter증가시키는 방법

App.js

import { useDispatch, useSelector } from 'react-redux';


function App() {
  const count = useSelector((state) => state.count); //useSelector은 함수를 매개변수로 받고 state를 매개변수로 준다
  const dispatch = useDispatch();

  const onCount = () => {
    dispatch({ type: 'INCREMENT' }); //useDispatch를 통해 액션을 던져주는 작업
  };
  return (
    <div className='App'>
      <h1>count:{count}</h1>
      <button onClick={onCount}>클릭!</button>
    </div>
  );
}

export default App;

reducer.js
if문 또는 switch문으로 작성가능하다

let initialState = {
  count: 0, //count state의 초기값을 0으로 세팅한다
};

function reducer(state = initialState, action) {
  if (action.type === 'INCREMENT') {
    return { ...state, count: state.count + 1 }; //spread 문법을 통해 기존 객체내용을 복사해 새로운 객체에 전달가능
  }

  return { ...state }; 
}

export default reducer;

payload

옵션 같은 존재다

//App.js
  const onCount = () => {
    dispatch({ type: 'INCREMENT', payload:{num:5} }); //payload의 옵션으로 {num:5}를 주면 
  };

//reducer.js

let initialState = {
  count: 0, //count state의 초기값을 0으로 세팅한다
};

function reducer(state = initialState, action) {
  if (action.type === 'INCREMENT') {
    return { ...state, count: state.count + action.payload.num }; //5씩 증가 
  }

  return { ...state }; 
}

export default reducer;