redux

프로젝트를 만드는중 무수히 많아지는 state들을 매번 자식으로 넘겨주는 과정이 매우 번거롭게 느껴졌다. 그래서 많이 사용하는 redux를 공부해보자

기본 사용법

1. 초기 상태값 지정
2. reducer에서 초기 상태값을 받고, action을 지정해준다(switch문 사용)
3. action을 지정할때 state를 스프레드오퍼레이터로 펼쳐서 불변성 유지해준다
4. createStore를 사용해 store를 생성해준다, 첫번째 인자로 선언한 reducer(초기 상태값과 action을 가지고있음)를 받고 두번째 인자값은 redux-devtools를 사용하기 위한 composeWithDevTools를 넘겨준다.
5. 이로써 store세팅이 끝났고 App컴포넌트를 Provider객체로 감싸주고 Provider객체의 props로 store를 넘겨준다
6. 이로써 Provider내부의 App에 연결된 모든 컴포넌트에서 store의 상태값과 action을 가져다 쓸 수 있다.
7. 사용방법은 useSelector로 상태값을 받고 useDispatch로 action을 받아서 사용한다.
   *상태값, action을 사용할모든 컴포넌트에서 중복되는 코드가 있으므로 커스텀훅으로 만들어서 사용하는방법도 좋아보인다. (ex. useGlobalState)

//store.js

import { createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";

const INITIAL_STATE = {
  name: "ktw",
};

const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case "CLICK_CELL":
      return {
        ...state,
        name: state.name,
      };
  }
};

export const store = createStore(reducer, composeWithDevTools());

//index.js
import {store} from './store'

ReactDom.render(
  <>
    <Provider store={store}>
        <App />
    </Provider>
  </>,

  document.querySelector("#root")
);

//App.js

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

const App = () => {
	const item = useSelector((state) => state);
    const dispatch = useDispatch();
    
    return(
    	{item.name} //ktw가 출력됨
    )
}

여러개의 reducer를 묶어주는 combineReducers

//store.js

import {combineReducers} from 'redux'

const state01 = { name : "김태완"}
const state02 = { nickname : "부디"}

const nameReducer = (state = state01, action) => {
  switch (action.type) {
    case "CHANGE":
      return {
        ...state,
        name: "김.태.완",
      };
    default:
      return state;
  }
};

const nicknameReducer = (state = state02, action) => {
  switch (action.type) {
    case "CHANGE":
      return {
        ...state,
        name: "부.디",
      };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  name: nameReducer,
  nickname: nicknameReducer,
});

const store = createStore(rootReducer, composeWithDevTools());

console.log(store.getState())