react-redux 강의: 생활코딩(2022)

 

react redux 설치

npm install redux react-redux

 

 

store 생성 import 'redux'

import{ createStore } from 'redux';
const store = createStore(reducer);

 

반드시 reducer 만들어줘야함 store 안에 있는 state 변경

return 값이 새로운 값

 

action 값바꾸기

function reducer(currentState, action) {
	if(currentState === undefined) {
    	return{
           number: 1, //초기값
        };
    }
    const newState = {...currentState};
    return newState
    //원본은 바뀌지 않는다.
}

 

 

import'react-redux'

 

provider 컴포넌트에게 store 전달

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

❗️반드시 store을 전달해줘야함. 위에서 생성한 store 값 받음

 

useSelector 어떤 state값을 선택하고 싶은지 설정

함수를 인자로 받음

const number = useSelector((state) => state.number);

number에 위에서 설정한 1이 저장됨

 

useDispatch state 값 변경

const dispatch = useDispatch();

디스패치 가져오기

 

action 전달

<input type="button" value="+" onClick{() => {
   dispatch({ type: 'PLUS' });
}}

PLUS

 

reducer가 호출됨

function reducer(currentState, action) {
	if(currentState === undefined) {
    	return{
           number: 1,
        };
    }
    const newState = {...currentState};
    if (action.type === 'PLUS') {
      newState.number++;
    } // 1을 추가
    return newState;   
}

reducer가 호출되면서 새로운 state가 만들어짐

 

state를 사용하는 number만 값이 바뀐다 부모는 다시 렌더링 되지 않음 퍼포먼스에 상당히 도움 받음