Redux Toolkit 및 Typescript를 사용하여 React 응용 프로그램을 설정하는 방법

React – 사용자 인터페이스를 구축하는 JavaScript 라이브러리 -->reactjs
Typescript – 유형을 추가하여 JavaScript를 확장하는 소스 언어입니다. -->typescript
Redux는 JavaScript 응용 프로그램의 예측 가능한 상태 컨테이너입니다.이것은 서로 다른 환경(클라이언트, 서버 및 네이티브)에서 실행되는 행위가 일치하는 응용 프로그램을 작성하는 데 도움을 줄 수 있습니다. -->redux
Redux 키트 - 공식 Redux 문서에 따라 Redux 논리를 작성하는 추천 방법입니다.Redux Core를 중심으로 Redux 애플리케이션 구축에 필요한 모든 소프트웨어 패키지와 기능을 포함합니다. -->redux-toolkit
우리는 왜 한 페이지의 응용 프로그램을 짜야 합니까? -주요 원인은 우리가 사용자에게 로컬 응용 프로그램과 같은 체험을 제공할 수 있기 때문이다.
현대 웹 응용 프로그램을 개발하려면 UI 구축뿐만 아니라 상태 관리도 필요하다.가장 포괄적인 라이브러리 중 하나는 Redux입니다.이 강좌에서는 2020년에 제공된 최신 라이브러리와 간소화 기술로 Redux를 설정하는 방법을 배울 것입니다.

카탈로그

Redux 키트를 선택해야 하는 이유

Typescript 및 Redux를 사용하여 Create React 응용 프로그램을 설정하는 방법

Redux 구축 방법

useDispatch와useSelector 연결

로Redux와React 연결

요약

Redux 키트를 선택해야 하는 이유

Simple – 일반적인 용례를 간소화하는 실용 프로그램, 예를 들어 저장 설정, 축소기 만들기, 변경 불가 업데이트 논리 등을 포함한다.

고집 – 상자를 열면 바로 사용할 수 있는 상점 설정에 좋은 기본 설정을 제공하고 가장 자주 사용하는 Redux 플러그인 내장을 포함한다.

강력함 - Immer와 Autodux 등 라이브러리에서 영감을 받아'변이'의 변하지 않는 업데이트 논리를 작성하고 전체 상태의'절편'을 자동으로 만들 수 있습니다.

고효율 - 응용에 필요한 핵심 논리에 전념하면 더 적은 코드로 더 많은 일을 할 수 있다.

Typescript 및 Redux를 사용하여 Create React 애플리케이션을 설정하는 방법
Redux toolkit 자습서의 경우 CRA를 사용하여 새 react 응용 프로그램을 설정하는 것부터 시작하겠습니다.npx create-react-app redux-toolkit –template typescript또는yarn create-react-app redux-toolkit –template typescript npx on the first line is no a typo – it’s a package runner tool that comes with npm 5.2+참고:
만약 이전에 npm을 통해 전 세계에 creat react app를 설치한 적이 있다면, "npm uninstall name of the package"를 사용하여 이 패키지를 마운트 해제하여 npx가 항상 최신 버전을 사용하도록 하십시오.create react 응용 프로그램의 전역 설치는 더 이상 지원되지 않습니다.cd redux-toolkit npm start 또는 yarn start("사실"을 사용한다면)
다음 패키지가 설치되어 있는지 확인하십시오.존재하지 않는 경우 typescript를create react 응용 프로그램 항목에 추가하려면 먼저 설치합니다.npm install –save typescript @types/node @types/react @types/react-dom @types/jest혹은yarn add typescript @types/node @types/react @types/react-dom @types/jest다음으로는 redux-toolkit, redux-logger 및 uuid를 추가하여 다음을 포함합니다.npm install –save react-redux redux-logger @reduxjs/toolkit uuid또는yarn add react-redux redux-logger @reduxjs/toolkit uuid어떻게 당신의 Redux를 세웁니까

src
App
    App.tsx
    App.css
type.d.ts
index.tsx
index.css
store
    todos
        index.ts
        todos.initialState.ts
        todos.reducer.ts
        todos.slice.ts
root-reducer.ts
store.ts

이제 스토어를 구성할 준비가 되었습니다.
1단계: 폴더 만들기"/src/store"Redux와 관련된 모든 파일이 여기에 배치됩니다.
2단계: "store.ts"에서 파일 생성"src/store"이 파일에는 "configure Store"함수가 포함되어 있으며,standart Redux "create Store"함수에 대한 추상적이며, 저장 설정을 담당합니다."Redux logger"를 사용하고 사용자 정의 중간부품을 적용하려면 "get Default Middleware ()"함수를 가져와 사용할 수 있는 모든 도구를 "logger"와 함께 전파한 다음 "configure Store"에 도구로 전달해야 합니다.

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import logger from 'redux-logger';

import { reducer } from './root-reducer';

const middleware = [...getDefaultMiddleware(), logger];

export default configureStore({
  reducer,
  middleware,
});

3단계: "src/store"에 파일 "root reducer.ts"만들기
장기적으로 볼 때, 우리는 비례에 따라 응용 프로그램을 구축해야 하기 때문에, 우리는 단독 '루트 Reducer.ts' 파일을 원한다. 그러면 우리는 다른 Reducer를 가져올 수 있다.

import { todosSlice } from './todos/todos.slice';

export const reducer = {
  todos: todosSlice.reducer
};

현재 저희 감속기에 todoSlice가 없습니다. 만들겠습니다.
4단계: 폴더'src/store/todos'만들기
이 폴더는 'todos 슬라이드' 와 관련된 모든 논리를 포함합니다.
5단계: "index.ts", "todos.initialState.ts", "todos.reducers.ts", "todos.slice.ts"
저장 상태의 모든 todo 논리 (인터페이스, 축소기, 조작, todo 슬라이드)
6단계:'src/store/todos'의'todos.slice.ts'부터 시작합시다.

import { createSlice } from '@reduxjs/toolkit';
import { todosInitialState, todosReducer } from '.';

*createSlice - a function that accepts an initial state, an object full of reducer 
functions, and a slice name that automatically generates action creators and action 
types that correspond to the reducers and state.  Internally it uses createAction and createReducer* 

export const todosSlice = createSlice({
  name: 'todos', // name used in action types
  initialState: todosInitialState, // initial state for the reducer
  reducers: todosReducer,
});

export const {
  actions: { // action creators exported from todosSlice.actions available out of the box
    create: createTodoActionCreator
  },
} = todosSlice;

7단계: 그런 다음 "src/todos"에서 "todos.initial State.ts"를 계속합니다.

import { v1 as uuid } from 'uuid';
import { ITodo } from '../../type';

export const todosInitialState: ITodo[] = [
  {
    id: uuid(),
    desc: 'Learn Redux-ToolKit',
    isComplete: false,
  },
];

창조 토도.tsx:
단계 8: "src/store/todos/todos.reducer.ts"에 부족한 정보를 추가합니다
참고:
더욱 일치하기 위해서는 아래의 모든 모델에 각자의 인터페이스가 있는 것을 권장합니다.이 강좌에서 그 중 일부 부분을 간소화하였다.

import { PayloadAction } from '@reduxjs/toolkit';
import { v1 as uuid } from 'uuid';

import { ITodo } from '../../type';

export const todosReducer = {
  create: {
    reducer: (
      state: ITodo[],
      action: PayloadAction<{ id: string; desc: string; isComplete: boolean }>
    ) => {
      state.push(action.payload);
    },
    prepare: ({ desc }: { desc: string }) => ({
      payload: {
        id: uuid(),
        desc,
        isComplete: false,
      },
    }),
  }
};

단계 9: 그리고 "src/store/todos/index.ts"에서 이 파일들을 내보냅니다

export * from './todos.reducer';
export * from './todos.initialState';
export * from './todos.slice';

useDispatch와useSelector 연결을 사용하여 Redux와React 구성 요소를 연결합니다
10단계: 폴더'src/components'만들기
모든 구성 요소는 잠시 거기에 놓을 것이다.
11단계: 폴더 "src/app"만들기
12단계: 파일 "App.tsx"및 "App.css"를 "src/App"로 이동
13단계: App.tsx를 다음 코드로 채웁니다.

import React from 'react';
import { useSelector } from 'react-redux';

import { State } from '../type';
import { CreateTodo, TodoList } from '../components';

import './App.css';

const App = function () {
  const todos = useSelector((state: State) => state.todos);

  return (
    <div className="App">
      <div className="App__header">
        <h1>Redux Toolkit</h1>
        <CreateTodo />
      </div>
      <div className="App__body">
        <TodoList todos={todos} />
      </div>
    </div>
  );
};

export default App;

14단계: src/components에서 다음 파일을 생성합니다.
창조 토도.tsx:

import React, { FC, FormEvent, useState, ChangeEvent } from 'react'
import { useDispatch } from 'react-redux';
import { createTodoActionCreator } from '../store/todos';

interface ICreateTodoProps { }

export const CreateTodo: FC<ICreateTodoProps> = () => {
  const dispatch = useDispatch();

  const [newTodoInput, setNewTodoInput] = useState<string>('');

  const handleCreateNewTodo = (e: FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    if (!newTodoInput.length) return;

    dispatch(createTodoActionCreator({ desc: newTodoInput }));
    setNewTodoInput('');
  };

  const handleNewInputChange = (e: ChangeEvent<HTMLInputElement>): void => {
    setNewTodoInput(e.target.value);
  };

  return (
    <form onSubmit={handleCreateNewTodo}>
      <label htmlFor="new-todo">Add new:</label>
      <input
        onChange={handleNewInputChange}
        id="new-todo"
        value={newTodoInput}
      />
      <button type="submit">Create</button>
    </form>
  )
}

처리해야 할 사항.tsx:

import React, { FC } from 'react'
import { ITodo } from '../type'

interface ITodoProps {
  key: string;
  todo: ITodo
}

export const Todo: FC<ITodoProps> = ({ key, todo }) => <li>{todo.desc}</li>

토도리스트.tsx:

import React, { FC } from 'react'
import { ITodo } from '../type'
import { Todo } from '.'

interface ITodoList {
  todos: ITodo[]
}
export const TodoList: FC<ITodoList> = ({ todos }) => {
  return (
    <ul className="App__list">
      <h2>My Todos:</h2>
      {todos &&
        todos.map((todo, i: number) => (
          <Todo key={todo.id} todo={todo} />
        ))}
    </ul>
  )
}

15단계: 루트 폴더에 type.d.ts 파일을 만들려면 다음과 같이 하십시오.

export interface ITodo {
  id: string;
  desc: string;
  isComplete: boolean;
}

export interface State {
  todos: Todo[];
}

요약
2020년 레드ux 설치가 얼마나 간단한지 놀랍다.Typescript, React Hooks 및 Redux 키트를 사용했습니다.
본문을 읽어 주셔서 감사합니다!나는 네가 그것이 유용하다고 생각하기를 바란다😊.