Redux

Redux 사용 해보기

• npm i redux react-redux @reduxjs/toolkit
• index.js 수정

import {configureStore} from "@reduxjs/toolkit";
import { Provider } from "react-redux";

configureStore : store 생성 함수.
Provider: 리액트 App.js 에 Store 를 손쉽게 연동 할 수 있도록 도와주는 컴포넌트

index.js

//index.js
//초기값
const intialState ={
  number:0,
}
// Reducer 정의 : 변화를 일으키는 함수
const reducer = ( state = initialState,action) =>{
  switch (action.type){
    case"INCREMENT":
      	return{number:state.number +1};
    case"DECREMENt":
      	return{number:state.number -1};
    default:
      return state;
  }
}



const store = configureStore({ reducer: reducer }, composeWithDevTools());
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

  <Provider store={store}>
    <App4 />
  </Provider>
);

• npm i redux-devtools-extension 를 설치해야 Chrome 에서 확장프로그램으로 redux를 확인 할 수 있다.

//composeWithDevTools() : Chrome devtools에서 확인할 수 있음. 
const store = configureStore({ reducer: reducer }, composeWithDevTools());

App.js

• useState 사용 및 props 전달 부분 다 삭제하기.

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

const number = useSelector(state=>state.number);
const dispatch = useDispatch();
<button onClick={()=>{dispatch({type:'INCREASE'})}}>1증가</button>
<button onClick={()=>{dispatch({type:'DECREASE'})}}>1감소</button>

• store에서 number를 가져와서 number로 할당,

기본 폴더 구조

• components 폴더
  DOM 마크업과 스타일 담당 / 데이터 처리 능력 없음 Redux와 관련 없음
  부모 컴포넌트로 부터 받은 props인 데이터와 콜백(callback)을 사용한다.
• containers 폴더
  동작 로직 관련 / 데이터 처리능력 있어야함 / Redux와 관련이있는 부분
  렌더링 되어야할 데이터를 props로 components 폴더 컴포넌트로 넘겨줌
• store 폴더 (or modules 폴더)
  State,Acion 타입 ,Action 생성 함수,reducer 코드등 리덕스 관련 코드를 모아두는 폴더

ex)

// store/counter.js

export const increase = () => ({type:'counter/INCREASE'});
export const decrease = () => ({type:'counter/DECREASE'});

const initialState = {
  number:0
}
//reducer
function counter(state = initialState, action) {
  swtich(action.type){
    case 'counter/INCREASE' {
    	number: state.number + 1
 		 }
  	case 'counter/DECREASE'{
    	number: state.number - 1
		}
	default:
		returm state;
  	}
}
export default counter;

combineReducers

• 여러개의 리듀서를 하나로 합쳐준다.

// store/index.js
import {combineReducers} from 'redux';
const rootReducer = combineReducers({
  counter});
export default rootReducer;

음... 피드백환영