소개

Redux의 기초 부분을 요약합니다.
redux-thunk와 redux-saga를 이해하기 위해 Redux가 손으로 움직일 수 있음을 확인했습니다.
Functional Component에서 Redux의 Hooks(useDispatch, useSelector 등)를 사용했다.

카운터 구성 요소

import * as React from 'react';
import { useDispatch, useSelector } from 'react-redux';
//Actionをインポート
import { countUp, countDown } from '../../actions';

export const Counter = (props) => {
  const dispatch = useDispatch();
  const count = useSelector(state => state.count)

  const onCountUp = () => {
    dispatch(countUp());
  };
  const onCountDown = () => {
    dispatch(countDown());
  };

  return (
    <div>
      <div>count:{count}</div>

      <button onClick={onCountUp}>up!</button>
      <button onClick={onCountDown}>down!</button>
    </div>
  );
};

・View에서 버튼이 클릭되었을 때, Action이 store에 dispatch(발송)된다.
· useSelector는 새로운 state와 오래된 state에 차이가 있을 때 그것을 View에 보내 반영시킨다.

Reducer

Action을 받았을 때, 새로운 state로 어떻게 변경하는지 쓴다.

frontend/src/reducers/index.tsx

// Reducer
const reducer = (state = { count: 0 }, action) => {

  switch (action.type) {
    case 'COUNT_UP':
      return { count: state.count + 1 };
    case 'COUNT_DOWN':
      return { count: state.count - 1 };
    default:
      return state;
  }
};
export default reducer;

인수의 state를, dispatch 되어 온 action 에 근거해 처리해 돌려준다.

Provider store={store}

frontend/src/javascripts/components/home.tsx

import * as React from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

import { Counter } from '../pages/Counter';

import {
  createStore,
} from "redux";
import { Provider } from 'react-redux';
import reducer from '../../reducers/'

const store = createStore(reducer);

export const Home = () => {
  return (
    <BrowserRouter>
      <Provider store={store}>
        <Switch>
          <Route exact path="/redux" component={Counter} 
        </Switch>
      </Provider>
    </BrowserRouter>
  );
};

가져온 reducer를 기반으로 store를 만들고,
에서 다음 구성 요소와 연결합니다.

액션

frontend/src/actions/index.tsx

export const countUp = () => {
return ({ type: 'COUNT_UP' });
}
export const countDown = () => {
return ({ type: 'COUNT_DOWN' });
}

끝에.

끝까지 읽어 주셔서 감사합니다
전직을 위해, 미경험의 상태로부터 React, Rails를 학습하고 있습니다. 계속해서 투고해 나가는 가운데, 그 때문에의 인풋도 필연적으로 늘어나, 성장에 연결될까라고 생각하고 있습니다.
투고의 내용에 잘못되어 있는 곳이나, 덧붙여야 할 곳이 많이 있을까 생각하므로, 지적 받을 수 있으면 다행입니다. 이 기사를 읽어 주셔서 감사합니다.