이 기사는 TOWN 주식회사 어드벤트 캘린더 6일째의 기사입니다(대지각해서 죄송합니다...)
htps : // 아 dゔ ㄇ r. 오 rg / 돈 rs / 4335

React Hooks는 React16.8에서 추가된 기능으로, 함수 컴포넌트에 state 등의 기능을 사용할 수 있게 된 기법입니다.
htps : // 그럼. Rea ctjs. rg/do cs/호오 ks-인 t로. HTML

Redux toolkit은 아무래도 복잡한 설명을 써야 하는 이미지가 (개인적으로) 있는 redux를 간결하게 쓸 수 있는 라이브러리입니다. redux의 공식 팀이 발표하고 있다고 합니다.
htps : // 기주 b. 코 m / 레즈 xjs / 레즈 x-와 l t

이번에는 react hooks와 redux toolkit을 사용하여 tot 앱을 만들려고했습니다.

이쪽이 완성형입니다.

앱 만들기

먼저 create-react-app를 사용하여 앱 템플릿을 만듭니다.

npx create-react-app hooks-toolkit-sample

패키지를 설치합니다.

yarn add react-redux @reduxjs/toolkit

or

npm i react-redux @reduxjs/toolkit

yarn start 또는 npm start에서 앱을 실행합니다. react 로고 svg 등이 필요없는 파일이나 필요없는 설명 등은 삭제합니다.

액션과 리듀서 만들기

redux toolkit의 createSlice를 사용하여 action과 reducer를 동시에 만들고 있습니다. 이 덕분에 action과 reducer를 별도의 디렉토리로 나눌 필요가 없습니다.

modules/listModule.js

import { createSlice } from "@reduxjs/toolkit";

const listModule = createSlice({
    name: "list",
    initialState: [],
    reducers: {
      addList: (state, action) => [...state, action.payload],
      deleteList: (state, action) => state.filter(el => el.id !== action.payload),
    }
});

export default listModule;

스토어 만들기

reducer와 middleware를 등록합니다. 방금 전의 module의 reducer를 redux toolkit의 combineReducers를 사용해 등록하고 있습니다.

src/store.js

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import listModule from "./modules/listModule";

const rootReducer = combineReducers({
    list: listModule.reducer,
});

export const setupStore = () => {
    const store = configureStore({
        reducer: rootReducer,
    });
    return store
}

구성 요소 만들기

먼저 useDispatch() 를 사용하여 action 을 사용할 수 있도록 합니다.

todo을 추가하기 위한 텍스트의 input의 조작입니다만, input의 onChange 에 handleChangeList 함수를 설정해 문자를 입력할 때마다 함수가 실행되도록(듯이) 합니다.
그런 다음 react hooks의 useState를 사용하여 입력 한 텍스트를 일시적으로 newListName의 상태에 넣습니다.addList 버튼을 누른 순간에 newListName를 인수로 하여 action의 addList를 실행하고 store의 state에 todo의 텍스트가 들어가면 화면이 업데이트됩니다.

components/App.js

import React from 'react';
import { useState } from 'react';
import { useDispatch, useSelector } from "react-redux";
import listModule from "../modules/listModule";
import List from "./List.js";

const App = () => {
  const lists = useSelector(state => state.list);

  const [newListName, setListName] = useState("");
  const dispatch = useDispatch();

  const addList = () => {
    if (newListName !== "") {
      dispatch(listModule.actions.addList({id: lists.length > 0 ? lists.reduce((a,b) => a.id > b.id ? a : b).id + 1 : 1, title: newListName}));
    }
    setListName("");
  };

  const handleChangeList = (e) => {
    setListName(e.target.value);
  };

  return (
    <div className="App">
      <p>Redux TODO sample</p>
      {lists.map((list) =>
        <List key={list.id} item={list} />
      )}
      <input type="text" onChange={handleChangeList} value={newListName}/>
      <button onClick={addList}>addList</button>
    </div>
  );
};

export default App;

components/List.js

import React from 'react';
import { useState } from 'react';
import { useDispatch, useSelector } from "react-redux";
import listModule from "../modules/listModule";

const List = (props) => {
  const { item } = props;
  const dispatch = useDispatch();

  const deleteList = () => dispatch(listModule.actions.deleteList(item.id));

  return (
    <div>
      {item.title}
      <button onClick={deleteList}>deleteList</button>
    </div>
  )
}

export default List;

지금까지 클래스 컴포넌트를 사용하지 않고 매우 컴팩트하게 redux 앱을 만들 수있었습니다. 쓰고 꽤 즐거웠기 때문에 이번에는 좀 더 복잡한 앱도 만들어 보자고 생각합니다.

참고:
Typescript와 React Hooks에서 Redux는 더 이상 힘들지 않습니다.
h tps:// 퀵했다. 작은 m / ky7 집 예 / MS / b3f43 엣 C497b9115449
Redux Hooks의 편안함 dispatch & states
htps : // 코 m / 오우 ゃ l / ms / 569384 5c8c7 78f98
Redux의 기술량이 너무 많기 때문에 Redux의 공식 도구로 철저히 편하게 한다. (Redux Toolkit)
htps : // 코 m / 오 ゃ ぃ l / ms / 76 9cb 569d01f2931