[220804] React Redux

redux install

npm i react-redux
yarn add react-redux

store 생성

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

Reducer

function reducer(state, action) {
	//state의 기본값
	if(state === undefined){
    	return {
        	number: 1,
        }
    }
    //데이터의 불변성을 위한 복사
    const newState = {...state};
    return newState
}

redux가 제공하는 기능 4가지

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

• Provider
  • createStore 한 값을 넣어줘야함

export default function App(){
    return(
        <Provider store={store}>
            <Component/>
        </Provider>
    )
}

• useSelector
  • state 를 가져올때 사용
  • 인수로 함수를 받음 ⇒ 함수는 state 값을 인수로 받아서 어떤 값을 사용할 지 지정하면 됌

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

• useDispatch
  • action을 전달

const dispatch = useDispatch()
dispatch({type: 'PLUS'}) 

 

참조 생활코딩 react-redux