React. Redux

Dae-Hee·2021년 8월 10일
0

React Base Study

목록 보기
8/9
post-thumbnail

React. Redux

⊙ Redux

  • react state 상태관리 / props 대신 사용할 수 있는 라이브러리

  • global state 유지를 쉽게 할 수 있다.

  • 최상위 컴포넌트에서 최하위 컴포넌트까지 값 전달을 한번에 할 수 있다.

⊙ Reducers

  • redux로 정의한 state를 변경시킬때 액션을 정의 하는 곳

⊙ Store

  • reducer를 저장하는 어플리케이션에 있는 단 하나의 객체

⊙ 사용법

/* ⊙ redux install */
yarn add redux react-redux


/* ⊙ import */
import { Provider, connect, useDispatch, useSelector } from 'react-redux';
import { combineReducers, createStore } from 'redux';


/* ⊙ reducer 셋팅 */
let 초기값 = 0;
function reducer(state = 초기값, 액션){
    // state : return 해줄 값
    // 액션   : 해당 redux를 사용하는 컴포넌트에서 전달 받을 인자
    // (...)
    // 상황에 맞는 로직을 넣고 state를 return 해주면된다.
}


/* ⊙ reducer 저장 */
let store = createStore(combineReducers({reducer}));


/* ⊙ Provider 감싸기 */
<Provider store={store}> 
  // redux를 사용할 컴포넌트를 감싼다.
  <App />
</Provider>


/* ⊙ redux state 사용법 */
// state를 props화 하는 함수
function reduxFnc(state){
  return{
    list : state.reducer
  }
}
// 컴포넌트 하단 변경
export default connect(reduxFnc)(Detail)


/* ⊙ 컴포넌트 →  reducer 값 전달 */
// reducer의 액션 매개변수로 값 전달
props.dispatch({type : 'add', payload : obj})

⊙ useDispatch, useSelector

  • useDispatch 는 React.useContext 으로 Provider 에서 정의한 contextValue 를 가져와 store.dispatch 를 반환한다.

  • useSelector 는 selector Callback 을 전달하여, 필요한 값을 가져올 수 있다.

// state에는 모든 reducer가 담겨있다.
let state = useSelector((state) => state);
export default connect(함수명)(컴포넌트명)export default 컴포넌트명;

// dispatch 해당 객체에 reducer에 전달할 값을 지정할 수 있다.
let dispatch = useDispatch();

⊙ @reduxjs/toolkit

  • reduxjs toolkit을 사용하면 좀 더 가독성있는 코드를 작성할 수 있다.
  • 함수형이라 정돈된 느낌을 준다.
  • state 수정 시 복사본을 만들 필요가 없다.
const 초기값 = { count : 0, user : 'kim' };

const counterSlice = createSlice({
	name: 'counter',
  	initialState: 초기값,
  	reducers: {
      증가 (state){
          state.count += 1;
      },
      감소 (state){
          state.count -= 1;
      }
    }
})

let store = configureStore({
	reducer: {
      counter : counterSlice.reducer
    }
})

export let {증가, 감소} = counterSlice.actions

// 사용
const reduxUse = useSelector((state :RootState) => state );
const dispatch :Dispatch = useDispatch();

{reduxUse.counter.user}

dispatch(증가())

0개의 댓글