[React JS] [참조] Redux

[React JS] [참조] Redux

 

1. Redux란?

- Redux is a predictable state container for JavaScript

- JS 어플리케이션을 위한 상태 관리 라이브러리

 

Props VS State

Props (Properties)

- 구성요소가 서로 통신하는 방법 (A->B 컴포넌트간 데이터 교환)

- 상위 구성 요소에서 아래쪽으로 흐름

- 해당 값을 변경하려면 자식 관점에서 Props 변경가능, 부모는 내부 상태를 변경해야함

   = 자식 컴포넌트의 props를 변경하려면 부모 컴포넌트의 state를 바꿔야한다는 말 (a bit immutable)

<ChatMessages
  messages={messages}
  currentMember={member}
>

State

- 부모 -> 자녀가 아닌 하나의 컴포넌트 안에서 데이터 전달

  ex) 검색 창에 글을 입력할 때 글이 변하는 것은 state 변경

- state is mutable

- state이 변하면 re-render됨

state = {
  message: ''.
  attachFile: undefined,
  openMenu: false,
};

 

Redux는 State를 관리하는 것

Redux Data Flow (strict undirectional data flow)

ex) 10$ deposit

-> state: 0

-> UI: +10

-> EventHandler -> Dispatch Action (+10$)

-> Store State + 10$

 

Action

- action은 간단한 JavaScript 객체 

- 수행하는 작업의 유형을 지정하는 type 속성 포함 (ex.withdraw/deposit)

- 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 payload 속성을 가질 수도 있음

- reducer로 action을 던짐

 

Reducer

- 애플리케이션 상태의 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수

- parameter로 넘어오는 arguments(인수)로 조치를 취하고 store 내부 상태를 업데이트

- 이전 state와 action object를 받은 후 next state를 return

(previousState, action) => nextState

* Reducer는 pure function - reducer 내부에서 하지말아야 할 것들

- Mutate its aruments

- Perform side effects like API calls and routing transitions

- Call non-pure functions (e.g. Date.now(), or Math.random())

 

Redux Store

- 이들을 하나로 모으는 객체 저장소는 애플리케이션의 전체 상태 트리를 보유

- 내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것

- Redux Store는 클래스가 아님 (몇가지 Methods가 있는 객체)

---

2. Middleware 없이 Redux counter app 만들기 

리액트 앱 설치

npx create-react-app ./ --template typescript

redux 라이브러리 설치

npm install redux --save

 

Counter UI 및 함수 생성

App.tsx

 

Reducer  생성 

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

export default counter;

App.tsx

import React from "react";
import "./App.css";

type Props = {
  value: number;
  onIncrement: () => void;
  onDecrement: () => void;
};

function App({ value, onIncrement, onDecrement }: Props) {
  return (
    <div className="App">
      Clicked: {value} times
      <button onClick={onIncrement}>+</button>
      <button onClick={onDecrement}>-</button>
    </div>
  );
}

export default App;

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { createStore } from "redux";
import counter from "./reducers";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

const store = createStore(counter);

const render = () => root.render(
  <React.StrictMode>
    <App
      value={store.getState()}
      onIncrement={() => store.dispatch({ type: "INCREMENT" })}
      onDecrement={() => store.dispatch({ type: "DECREMENT" })}
    />
  </React.StrictMode>
);
render();

store.subscribe(render);

---

3. Combine Reducers

하나의 큰 reducer안에 여러가지 reducer 넣는 것

reducers>index.tsx

import { combineReducers } from "redux";
import counter from "./counter";
import todos from "./todos";

const rootReducer = combineReducers({
  counter,
  todos,
});

export default rootReducer;

todo.tsx

enum ActionType {
  ADD_TODO = "ADD_TODO",
  DELETE_TODO = "DELETE_TODO",
}

interface Action {
  type: ActionType;
  text: string;
}

const todos = (state = [], action: Action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [...state, action.text]
    default:
      return state;
  }
};

export default todos;

index.tsx

const store = createStore(rootReducer);

store.dispatch({
  type: "ADD_TODO",
  text: "USE_REDUX",
});

console.log("store.getState", store.getState());

const render = () =>
  root.render(
    <React.StrictMode>
      <App
        value={store.getState()}
        onIncrement={() => store.dispatch({ type: "INCREMENT" })}
        onDecrement={() => store.dispatch({ type: "DECREMENT" })}
      />
    </React.StrictMode>
  );
render();

store.subscribe(render);

---

4. Provider

- <Provider>의 구성요소는 Redux Store 저장소에 엑세스해야하는 모든 중첩구성요소에서 Redux Store 저장소를 사용할 수 있게함

- React Redux 앱의 모든 React 구성 요소는 저장소에 연결할 수 있으므로 대부분의 응용 프로그램은 전체 앱의 구성 요소 트리가 내부에있는 최상위 수준에서 <Provider>를 렌더링함

- 그런 다음 Hooks 및 연결 API는 React의 컨텍스트 메커니즘을 통해 제공된 저장소 인스턴스에 엑세스 가능

 

npm install react-redux --save

const render = () =>
  root.render(
    <React.StrictMode>
      <Provider store={store}>
        <App
          value={store.getState()}
          onIncrement={() => store.dispatch({ type: "INCREMENT" })}
          onDecrement={() => store.dispatch({ type: "DECREMENT" })}
        />
      </Provider>
    </React.StrictMode>
  );

type Props = {
  value: any;
  onIncrement: () => void;
  onDecrement: () => void;
};

function App({ value, onIncrement, onDecrement }: Props) {
  const [todoValue, setTodoValue] = useState("");
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTodoValue(e.target.value);
  };
  const addTodo = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setTodoValue("");
  };
  return (
    <div className="App">
      {/* Clicked: {value} times */}
      <button onClick={onIncrement}>+</button>
      <button onClick={onDecrement}>-</button>
      <form onSubmit={addTodo}>
        <input type="text" value={todoValue} onChange={handleChange} />
        <input type="submit" />
      </form>
    </div>
  );
}

---

5. useSelector & useDispatch (Hooks)

- <Provider>로 둘러싸고 속성에 store 넣었는데, 그 안(provider로 둘러싼)에있는 컴포넌트에서는 store 접근 가능

- useSelector로 store의 값 가져오고 useDispatch로 action 보냄

 

useSelector

const counter = useSelector((state) => state.counter)

function App({ value, onIncrement, onDecrement }: Props) {
  const dispatch = useDispatch();
  const counter = useSelector((state: RootState) => state.counter);
  const todos: string[] = useSelector((state: RootState) => state.todos);
  const [todoValue, setTodoValue] = useState("");
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTodoValue(e.target.value);
  };
  const addTodo = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    dispatch({type:"ADD_TODO", text: todoValue})
    setTodoValue("");
  };
  return (
    <div className="App">
      Clicked: {counter} times
      <button onClick={onIncrement}>+</button>
      <button onClick={onDecrement}>-</button>

      <ul>
        {todos.map((todo, index) => <li key={index}>{todo}</li>)}
      </ul>

      <form onSubmit={addTodo}>
        <input type="text" value={todoValue} onChange={handleChange} />
        <input type="submit" />
      </form>
    </div>
  );
}

 typescript라 state 'Object is of type 'unknow' 에러

-> 해결 : RootState 타입 생성

export type RootState = ReturnType<typeof rootReducer>;

---

6. Redux Middleware

- [Action을 dispatch에 전달하고 Reducer에 도달하는 순간] 사이에 사전에 지정된 작업을 실행할 수 있게 하는 중간자

- 로깅, 충돌보고, 비동기 API와 통신, 라우팅 등을 위해 Redux 미들웨어 사용 

 

리덕스 로깅 미들웨어 생성하기

- 로깅 미들웨어 함수 생성

const loggerMiddleware = (store) => (next) => (action) => {
  // code
}

const LoggerMiddleware = function(store) {
  return function(next) {
    return function(action) {
      // code
    }
  }
}

둘 다 같은 함수임

 

const loggerMiddleware = (store: any) => (next: any) => (action: any) => {
  console.log("store", store);
  console.log("action", action);
  next(action);
};

const middleware = applyMiddleware(loggerMiddleware);
const store = createStore(rootReducer, middleware);

---

7. Redux Thunk

- Redux를 사용하는 앱에서 비동기 작업을 할 때 많이 사용하는 방법

- Redux Middleware

 

Thunk

- 일부 지연된 작업을 수행하는 코드 조각

let x = 1+2
let foo = () => 1+2

// foo is a thunk

 

비동기 작업을 해야할 때?

- 서버에 요청을 보내서 데이터를 가져올 때

 

Axios module 설치

npm install axios --save

 

post reducer 생성

enum ActionType {
  FETCH_POSTS = "FETCH_POSTS",
  DELETE_POSTS = "DELETE_POSTS",
}

interface Post {
  userId: number;
  id: number;
  title: string;
}

interface Action {
  type: ActionType;
  payload: Post[];
}

const posts = (state = [], action: Action) => {
  switch (action.type) {
    case "FETCH_POSTS":
      return [...state, ...action.payload]
    default:
      return state;
  }
};

export default posts;

posts 데이터를 위한 요청 보내기

- 에러? : 원래 객체를 dispatch해야하는데 함수를 dispatch 해서 -> redux-thunk설치

- action이 왔을때 객체면은 reducer로 바로 감

- 만약 함수라면 dispatch와 getState function을 다시 call

-> 기다린 후에 다시 action 만들어서 객체로 반환

 

 

npm install redux-thunk --save

마찬가지로 store에 추가해줘야함

 

App.tsx

useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  const fetchPosts = (): any => {
    return async function fetchPostsThunk(dispatch: any, getState: any) {
      const response = await axios.get(
        "http://jsonplaceholder.typicode.com/posts"
      );
      dispatch({ type: "FETCH_POSTS", payload: response.data });
    };
  };

 

action들은 actions 폴더로 분리

import axios from "axios";

// export const fetchPosts = (): any => {
//   return async function fetchPostsThunk(dispatch: any, getState: any) {
//     const response = await axios.get(
//       "http://jsonplaceholder.typicode.com/posts"
//     );
//     dispatch({ type: "FETCH_POSTS", payload: response.data });
//   };
// };

export const fetchPosts = (): any => async (dispatch: any, getState: any) => {
  const response = await axios.get("http://jsonplaceholder.typicode.com/posts");
  dispatch({ type: "FETCH_POSTS", payload: response.data });
};

---

8. Redux Toolkit

- redux 로직을 작성하기 위한 공식 권장 접근 방식

- Redux 코어를 둘러싸고 있으며 Redux 앱을 빌드하는데 필수적인 패키지와 기능 포함

- 단순화, 실수 방지, Redux 애플리케이션 더 쉽게 작성할 수 있도록 함

 

Redux Toolkit Page

npx create-react-app ./ template redux-typescript

 

Store 생성 (돼있음)

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

 

React에 redux 제공 (provider를 통해)

 

 

Redux State Slice 생성 (reducer 부분)

import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { RootState, AppThunk } from '../../app/store';
import { fetchCount } from './counterAPI';

export interface CounterState {
  value: number;
  status: 'idle' | 'loading' | 'failed';
}

const initialState: CounterState = {
  value: 0,
  status: 'idle',
};

// The function below is called a thunk and allows us to perform async logic. It
// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
// will call the thunk with the `dispatch` function as the first argument. Async
// code can then be executed and other actions can be dispatched. Thunks are
// typically used to make async requests.
export const incrementAsync = createAsyncThunk(
  'counter/fetchCount',
  async (amount: number) => {
    const response = await fetchCount(amount);
    // The value we return becomes the `fulfilled` action payload
    return response.data;
  }
);

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    // Use the PayloadAction type to declare the contents of `action.payload`
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
  // The `extraReducers` field lets the slice handle actions defined elsewhere,
  // including actions generated by createAsyncThunk or in other slices.
  extraReducers: (builder) => {
    builder
      .addCase(incrementAsync.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(incrementAsync.fulfilled, (state, action) => {
        state.status = 'idle';
        state.value += action.payload;
      })
      .addCase(incrementAsync.rejected, (state) => {
        state.status = 'failed';
      });
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// The function below is called a selector and allows us to select a value from
// the state. Selectors can also be defined inline where they're used instead of
// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
export const selectCount = (state: RootState) => state.counter.value;

// We can also write thunks by hand, which may contain both sync and async logic.
// Here's an example of conditionally dispatching actions based on current state.
export const incrementIfOdd =
  (amount: number): AppThunk =>
  (dispatch, getState) => {
    const currentValue = selectCount(getState());
    if (currentValue % 2 === 1) {
      dispatch(incrementByAmount(amount));
    }
  };

export default counterSlice.reducer;

 

Reducer 

- 애플리케이션 상태의 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수

- 인수로 조치를 취하고 store 내부의 상태를 업데이트

- a function describing how the application's state changes

 

* redux 툴킷 사용하면 reducer에서 mutating 로직 사용가능

* immer 라이브러리를 사용하기 때문에 실제로 상태가 변하진 않음

* 초안(draft) 상태에 대한 변경사항을 감지하고 이러한 변경사항을 기반으로 완전히 새로운 불변(immutable)상태를 생성

= state 변경해서 불변성을 안지키는 것 같지만 immer라이브러리를 사용해서 초안 draft state 작성해서 변화를 근거로해서 불변성을 지켜줌

 

Store에 slice reducer 추가

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

 

react 컴포넌트에서 redux state 및 action 사용

- useSelector : 저장소에서 데이터 읽음

- useDispatch : action 전달

 

increment action dispatch해서 reducer에서 val+1

actionpayload에 amount 들어가고 그만큼 증가

dispatch안에 action넣어주면됨

 

---

9. Redux Toolkit

1) Store 생성

기존 Redux : createStore Redux Toolkit : configureStore

 

2) Action 생성

기존 Redux : 액션 타입 상수와 액션 생성자 함수를 분리 선언

const INCREMENT = 'counter/increment'

function increment(amount: number) {
  return {
    type: INCREMENT,
    payload: amount
  }
}

const action = increment(10)

- type을 상수에 할당- action create function ->함수 호출하면 객체 반환 (객체 안에 type - 상수가 들어감, payload - 인수 들어옴)

 

Redux Toolkit : 

import {createAction} from '@reduxjs/toolkit';

const increment = createAction<number>('counter/increment');

const action = increment(10);

- createAction으로 action 생성

- 자동으로 타입 넣어주면 자동으로 actioncreate 함수 반환되고 인수로 호출하면 반환됨 --> 타입만 넣으면 자동으로 함수 생성

 

3) Reducer 생성

기존 Redux : switch문으로 이루어진 리듀서 함수

Redux Toolkit : createReducer 함수를 이용 (initial state, (builder 콜백함수))

-> createReducer에서 Action을 처리하기 위해 케이스 리듀서를 정의하는 두 가지 다른 형태인 "빌더 콜백 - builder callback" 표기법과 "맵 객체(map object)" 표기법 지원

-> 둘 다 동일하지만 빌더 콜백 선호 (타입스크립트 호환성 위해)

 

Builder Callback

- addCase로 처리 (액션 타입과 정확히 맵핑되는 케이스 리듀서를 추가하여 액션 처리)

- addMatcher ( 패턴에 맞는 것을 처리)

- addDefaultCase (해당되지 않는 부분 처리)

 

Map Object
- initialState : 리듀서를 처음 호출할 때 사용해야하는 초기 상태 값

- actionsMap : 액션 타입이 케이스 리듀서에 맵핑되어있는 객체

- actionMatchers : {matcher, reducer}형식 배열 - 일치 여부 관계없이 모든 일치하는 리듀서가 순서대로 실행

- defaulstCaseReducer : 실행되지 않은 경우 실행되는 기본 케이스 리듀서

 

Prepare 콜백함수

- 해당 함수 사용해서 Action Contents 커스터마이징

- 일반적으로 액션 생성자 함수를 호출해서 액션을 생성할 땐 단일인자 받아서 action.payload값 생성 (위에서처럼)

- 이 때 payload에 사용자 정의 값을 추가하고 싶다면 아래와 같이 prepare callback 함수를 이용

import { creaetAction, nanoid } from '@reduxjs/toolkit'

const addTodo = createAction('todos/add', function prepare(text) {
  return {
    payload: {
      text,
      id: nanoid(),
      createAt: new Date().toISOString(),
    },
  }
})

console.log(addTodo('Write more docs'))

 

createSlice()

- createSlice 내부에서는 지금까지 배운 createAction과 createReducer를 사용

- createSlice 함수는 리듀서 함수의 대상인 초기상태(initialState)와 slice이름 을 받아 리듀서와 상태에 해당하는 액션 생성자와 액션 타입을 자동으로 생성하는 함수

 

* counter/decrement라는 action type 상수가 생성

* 이에 상응하는 액션 타입을 가진 액션이 디스패치 되면서 리듀서 실행 !

 

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: {
      reducer: (state, action) => {
        state.push(action.payload)
      },
      prepare: (text) => {
        const id = nonoid()
        return { payload: { id, text } }
      },
    },
  },
})

 

extraReducers

- createSlice가 생성한 action type 외에 다른 action type에 응답 가능

- 외부 액션을 참조하기 위한 것 (slice.actions에서 생성된 액션 가지지 않음)

createAsyncThunk

- createAction의 비동기 버전 (createAction + Async)

// createAction
function createAction(type, prepareAction);

// createAsyncThunk
function createAsyncThunk(type, payloadCreator, options);

- 비동기 요청의 생명 주기를 나타내는 추가 Redux action type 상수를 생성하는데 사용되는 문자열

 

> type

- 'users/requestStatus' type 인수는 다음 action type을 생성

- pending: 'users/requestStatus/pending'

- fulfilled: 'users/requestStatus/fulffiled'

- rejected: 'users/requestStatus/rejected'

 

> payloadCreator

- Promise를 반환하는 콜백 함수

const fetchUserById = createAsyncThunk(
  'user/fetchByIdStatus',
  async(userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

// 이런식으로
const userSlice = createSlice({
  reducers: {
  }
  extraReducers: (builder) => {
    builder.addCase(fetchUserById.pending, (state, action) => {
    })
  }
 })

- dispatch(fetchUserById(123))

하면 userId에 123 들어감

 

paylaodCreator(arg, thunkAPI)

- 일반적으로 Redux thunk 함수에 전달되는 모든 매개변수와 추가 옵션을 포함하는 객체

ㄴ 해당 객체에 들어있는 property

-->

- dispatch: Redux store dispatch 메서드

- getState: Redux store getState 메서드

- extra: 설정 시 thunk middleware에 제공되는 추가인수 (사용가능한 경우)
- requestId: 이 요청 시퀀스를 식별하기 위해 자동으로 생성된 고유 문자열 ID 값

- signal : 앱 로직의 다른 부분이 이 요청을 취소가 필요한 것으로 표시했는지 확인하는데 사용할 수 있는 AbortController.signal 개체

- rejectWithValue(value, [meta]): rejectWithValue는 정의된 페이로드 및 메타와 함께 거부된 응답을 반환하기 위해 작업 생성자에서 반환(또는 throw)할 수 있는 유틸리티 함수 -> 어떤 값을 주든 전달하고 거부된 작업의 페이로드에 반환, 메타도 전달하면 기존의 rejectAction.meta와 병합됨

- fulfillWithValue(value, meta) : fulfillWithValue는 fulfiledAction.meta에 추가할 수 있는 기능을 가지고있는 동안 값으로 이행하기 위해 작업 생성자에서 반환할 수 있는 유틸리티 함수

--> payload에 해당 값들이 들어감

 

cancellation

1) thunk 실행 중 취소하기

import React, { useEffect } from "react";
import { useAppDispatch } from "../../app/hooks";
import { incrementAsync } from "./counterSlice";

const Test = () => {
  const dispatch = useAppDispatch();
  useEffect(() => {
    const promise = dispatch(incrementAsync(10));

    return () => {
      promise.abort();
    };
  }, []);

  return <div>Test</div>;
};

export default Test;

export const incrementAsync = createAsyncThunk(
  'counter/fetchCount',
  async (amount: number) => {
    const response = await fetchCount(amount);
    // The value we return becomes the `fulfilled` action payload
    return response.data;
  }
);

- toggle 버튼 눌러서 test 컴포넌트가 더 이상 사용되지 않는 Unmount 될 때 clean up 부분이 호출되므로 promise.abort() 메소드가 호출되어서 thunk가 실행 중에 중지됨

-> 이렇게 되면 "thunkName/rejected" action이 dispatch

 

 2) abort 이벤트 발생 시 request도 취소하기

- reponse 기존대로하면 잘 옴

- abort 발생했을 때 request도 취소하는 법

AbortController

export const fetchUserAsync = createAsyncThunk(
  "counter/fetchUsers",
  async (_, { signal }) => {
    const controller = new AbortController();
    signal.addEventListener("abort", () => {
      controller.abort();
    });
    await axios.get("https://jsonplaceholder.typicode.com/users", {
      signal: controller.signal
    });
  }
);