Codestates immersive course

---

Redux 스프린트

오늘은 어제 미리 과제를 완성해 놓은 상태라 혼자서 복습을 하는 시간을 가졌다.

특히 클래스 컴포넌트에서 connect를 사용하여 컴포넌트에서 store에 접근하게 해주는 방법보다

함수 컴포넌트에서 react-redux에서 지원하는 useSelector, useDispatch를 이용해서

간단한 예제를 만들어 봤다.

일단 그래도 connect 함수를 사용하는거부터 다시 정리해보면

connect(mapStateToProps,mapDispatchToProps)(Component) 이런식으로 사용이 가능하다.

mapStateToProps

As the first argument passed in to connect, mapStateToProps is used for selecting the part of the data from the store that the connected component needs. It’s frequently referred to as just mapState for short.
It is called every time the store state changes.
It receives the entire store state, and should return an object of data this component needs.
-출처 리덕스 공식 문서

mapDispatchToProps

As the second argument passed in to connect, mapDispatchToProps is used for dispatching actions to the store.
dispatch is a function of the Redux store. You call store.dispatch to dispatch an action. This is the only way to trigger a state change.
With React Redux, your components never access the store directly - connect does it for you. React Redux gives you two ways to let components dispatch actions:
By default, a connected component receives props.dispatch and can dispatch actions itself.
connect can accept an argument called mapDispatchToProps, which lets you create functions that dispatch when called, and pass those functions as props to your component.
The mapDispatchToProps functions are normally referred to as mapDispatch for short, but the actual variable name used can be whatever you want.

무튼 나는 container 컴포넌트를 만들고 connect를 이용해서 컴포넌트에서 store에 접근이 가능해주게 하는게 귀찮으니 useSelector와 useDispatch를 사용하겠다.

Flux 패턴을 생각하며 action -> dispatch -> store -> view

액션 생성 함수

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT"; 

export const increment = () => ({
  type: INCREMENT
});

export const decrement = () => ({
  type: DECREMENT
});

리듀서 함수 생성

import * as types from "../actions/actionTypes";

const initialState = {
  count: 0
};

const counter = (state = initialState, action) => {
  switch (action.type) {
    case types.INCREMENT:
      return {
        ...state,
        count: state.count + 1
      };
    case types.DECREMENT:
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

export default counter;

store 생성

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from "./reducers";

const store = createStore(reducers);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  rootElement
);

Counter.js

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "../actions";

const Counter = () => {
  let count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())}>-1</button>
    </>
  );
};

export default Counter;