反応器を整理するスキル(17-2)

7773 ワード
はんのうぎじゅつ テキストリンク
Chapter 17:Ridexを使用してレスポンスアプリケーションの状態を管理する(2)
🎯 使いやすい
  • アクション作成関数redux-actionライブラリとimmerライブラリを使用してリプレイを記述
    1. redux-actions
  • 動作生成関数をより短く記述することができる.
  • スイッチ/ケース以外の文のhandleActions関数は
    • で使用できます.
    2.Counterモジュールで作成
    import { createAction, handleActions } from 'redux-actions';
    // createAction을 이용해 액션 생성 함수 설정
export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);

// handleActions를 이용한 리듀서 함수 설정
const counter = handleActions(
  {
    [INCREASE]: (state, action) => ({ number: state.number + 1 }),
    [DECREASE]: (state, action) => ({ number: state.number - 1 }),
  },
  initialState,
);
    初期状態を
  • に設定第1パラメータ更新関数として、初期状態を第2パラメータ
    • に設定.
    3.Todoモジュールで作成

  • modules/todos.js
    // createAction 사용해 액션 생성 함수 설정하기
export const changeInput = createAction(CHANGE_INPUT, (input) => input);

let id = 3;
export const insert = createAction(INSERT, (text) => ({
  id: id++,
  text,
  done: false,
}));

export const toggle = createAction(TOGGLE, (id) => id);
export const remove = createAction(REMOVE, (id) => id);
  • パラメータがある場合は、ペイロード名
    • を使用します.
  • createActionの2番目の関数で負荷を定義する関数
    • を個別に宣言する
    // handleActions 를 이용한 리듀서 작성
const todos = handleActions(
  {
      [CHANGE_INPUT]: (state, action) => ({
      ...state,
      input: action.payload,
      }),
      [INSERT]: (state, action) => ({
      ...state,
      todos: state.todos.concat(action.payload),
      }),
      [TOGGLE]: (state, action) => ({
      ...state,
      todos: state.todos.map((todo) =>
          todo.id === action.payload ? { ...todo, done: !todo.done } : todo,
      ),
      }),
      [REMOVE]: (state, action) => ({
      ...state,
      todos: state.todos.filter((todo) => todo.id !== action.payload),
      }),
  },
  initialState,
);

  • createActionで作成したアクション作成関数を使用して、パラメータ入力の値をactionとします.有効荷重の名目で共に入れる.

  • したがって,既存の更新ロジックにおいても行動する.ペイロード値の問合せと更新
    const todos = handleActions(
    {
        [CHANGE_INPUT]: (state, { payload: input }) => ({
        ...state,
        input,
        }),
        [INSERT]: (state, { payload: todo }) => ({
        ...state,
        todos: state.todos.concat(todo),
        }),
        [TOGGLE]: (state, { payload: id }) => ({
        ...state,
        todos: state.todos.map((todo) =>
            todo.id === id ? { ...todo, done: !todo.done } : todo,
        ),
        }),
        [REMOVE]: (state, { payload: id }) => ({
        ...state,
        todos: state.todos.filter((todo) => todo.id !== id),
        }),
    },
    initialState,
);
  • action.負荷をよく理解できない場合は、非構造化分配構文によって、その値がどのような値を意味するかを正確に理解することができる.
    • 4. immer
  • yarn add immer
  • 拡張演算子の奥行きを防ぐ
  • カウンタのように簡単であれば、immerを使用するとより複雑になります.Todosモジュールに適用します.
  • Todos.js 
    // immer 사용한 reducer
const todos = handleActions(
  {
      [CHANGE_INPUT]: (state, { payload: input }) =>
      produce(state, (draft) => {
          draft.input = input;
      }),
      [INSERT]: (state, { payload: todo }) =>
      produce(state, (draft) => {
          draft.todos.push(todo);
      }),
      [TOGGLE]: (state, { payload: id }) =>
      produce(state, (draft) => {
          const todo = draft.todos.find((todo) => todo.id === id);
          todo.done = !todo.done;
      }),
      [REMOVE]: (state, { payload: id }) =>
      produce(state, (draft) => {
          const index = draft.todos.findIndex((todo) => todo.id === id);
          draft.todos.splice(index, 1);
      }),
  },
  initialState,
);
    • 🎯 Hooksを使用したコンテナ構成部品の作成
  • connect関数
    • ではなくreact-reduxで提供されるhooksを使用します.
    1.UserSelectorを使用してステータスを表示する
  • connect関数の代わりにHook
    const結果=ユーザーセレクタ(ステータス選択関数);
    const CounterContainer = () => {
  const number = useSelector((state) => state.counter.number);
  return <Counter number={number} />;
};
  • MapStateToPropsのような役割です.ステータスのみクエリーできます.
    • 2.useDispatchを使用した送信動作

  • コンポーネント内でショップの組み込み関数を使用して割り当てることができます.
  • const dispatch = useDispatch();
  • dispatch({type: 'SAMPLE_ACTION'}) 
    • const dispatch = useDispatch();
return (
  <Counter
    number={number}
    onIncrease={() => dispatch(increase())}
    onDecrease={() => dispatch(decrease())}
  />
);

  • useCallback()を使用して再使用を防止
    const dispatch = useDispatch();
const onIncrease = useCallback(() => dispatch(increase()), [dispatch]);
const onDecrease = useCallback(() => dispatch(decrease()), [dispatch]);

return (
    <Counter number={number} onIncrease={onIncrease} onDecrease={onDecrease} />
);
    • 3.TodosContainerもHooksで設定
    ```
const TodoContainer = () => {
const { input, todos } = useSelector(({ todos }) => ({
    input: todos.input,
    todos: todos.todos,
}));

const dispatch = useDispatch();
const onChangeInput = useCallback((input) => dispatch(changeInput(input)), [
    dispatch,
]);
const onInsert = useCallback((text) => dispatch(insert(text)), [dispatch]);
const onToggle = useCallback((id) => dispatch(toggle(id)), [dispatch]);
const onRemove = useCallback((id) => dispatch(remove(id)), [dispatch]);

return (
        <Todos
            input={input}
            todos={todos}
            onChangeInput={onChangeInput}
            onInsert={onInsert}
            onToggle={onToggle}
            onRemove={onRemove}
        />
    );
};

export default TodoContainer;
```
    4.usStoreを使用してリカバリストアを使用
  • 一時無効
    const store = useStore();
    store dispatch({type:'SAMPLE_ACTION'})
    store.getState();
    • 5.UseActionsユーティリティの作成と使用
  • で
    • を参照
    6.connect関数との違い
  • connect:支柱を交換しないと、再レンダリングが自動的に回避され、パフォーマンスが最適化されます.
  • ユーザー・セレクタ:冗長状態を問合せた場合、最適化操作は自動的に実行されません.
  • React.memoをコンテナアセンブリに使用します.
  • TodosContainer.js
    export default React.memo(TodosContainer);
    • Hacktoberfest週2
    [プロジェクト]電子政府の枠組みAll-in-one