[React] Redux

Redux 쓰는 이유
1. props 문법 귀찮을 때 쓴다. 모든 Component가 props없이 state 직접 꺼낼 수 있음.
2. 상태관리가 용이 (state관리가 용이)

Redux에다가 state다 넣어놓기!

Redux library 설치방법

# index.js

import { Provider } from 'react-redux';
import {createStore } from 'redux';

const 체중 = 100

function reducer(state=체중, action){
	return state
}

let store = createStore(reducer)

ReactDOM.render(
	<React.StrictMode>
    	<Provider store={store}>
        	<App />
        </Provider>
    </React.StrictMode>

Component에서 store.js에 있던 state쓰려면

function App() {
	const 꺼내온거 = useSelector( (state) => state);
	return (
    	<div className = "App">
        	<p>님의 몸무게 : {꺼내온거}</p>
        </div>
    );
  }

state 상태관리하기

function reducer(state = 체중, action) {
	if(action.type === '증가') {
    	state++;
        return state
     } else if (action.type === '감소'){
     	state--;
        return state
     } else {
     	return state
     }
 }

component에서 state수정요청 할 때는 dispatch 사용

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

function App() {
	const 꺼내온거 = useSelector( (state) => state);
    **const dispatch = useDispatch()**
    
	return (
    	<div className = "App">
        	<p>님의 몸무게 : {꺼내온거}</p>
           ** <button onClick={()=>{ dispatch({type:'증가'})}}>더하기</button>**
        </div>
    );
  }

1. props 문법 귀찮을 때 쓴다. 모든 Component가 props없이 state 직접 꺼낼 수 있음.

원래 A함수에서 만든 state는 B함수에서는 사용을 못한다. 그래서 사용하게 하려면 props를 사용해야 하는데, 만약 그 함수가 100개면 props를 100번 사용해야 한다... 이건 너무 불편하고 귀찮아. 그래서 사용하는게 바로 Redux!!

Redux를 설치하면 그 안에 모든 state를 다 저장해 놔서 import { useSelector } from 'react-redux' 처럼 { } 안에 사용하고자 하는 redux를 다 넣어놓으면 아무데서나 state를 사용할 수 있다!!!!props 100개 안해도 redux만 쓰면 state를 선언한 곳이 아니더라도 state를 사용할 수 있다는 점~

2. 상태관리가 용이 (state관리가 용이)

component들이 직접 수정을 할 수 없고, redux에서 수정 요청만 가능하게 한다! 만약 state들을 저장해 놓은 파일이 store.js라면 버그가 일어나도 추적은 state들을 저장한 store.js라는 파일에서 수정하면 된다.
그래서 여기에 state를 수정하는 방법들을 다 넣어놓는다. component들은 직접 수정할 수 없다!

Q. component에서 state 수정 요청 하려면?
dispatch 쓴다!!
import { useDispatch, useSelector } from 'react-redux'