簡単な反応電子商取引店

1686 ワード
redux beginners javascript react テキストリンク
私は反応で超簡単な電子商取引アプリケーションを作成しました、反応Redux、反応ルータ、およびReduxは持続します.
各URLまたは“ルート”反応インデックスで反応ルータで行われました.jsファイル.

        <BrowserRouter>
          <Routes>
            <Route path="/" element={<App />} />
            <Route path="/cart" element={<Cart />} />
            <Route path="/products" element={<ProductContainer />} />
            <Route path="*" element={<Error />} />
          </Routes>
        </BrowserRouter>
アプリケーションのすべての製品がフェッチされ、反応ReduxからUseDispatchとUSElector機能を使用して周りに移動しました.

カートにアイテムを移動し、同様にそれらを削除するために行われた2つの簡単なアクションがあった.
function rootReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TO_CART:
      return {
        ...state,
        cart: [...state.cart, action.payload],
      };

    case REMOVE:
      return {
        ...state,
        cart: state.cart.filter((item) => item !== action.payload),
      };

    default:
      return state;
  }
}
Reduxの永続的なユーザーは、ユーザーが別のページに切り替えると消えてからカートの項目を防ぐために使用する必要がありました.
私はこの小さなアプリケーションに追加したいというより多くの機能性がありました、しかし、私は時間から使い果たしたか、他のインストールされたパッケージを動かす方法を理解することができませんでした.
しかし、コードを再生したり、少しこのアプリケーションについては、チェックアウトしてください.
day 11新特性ノート(fragment animation)
[データ構造/アルゴリズム]Big-Oシンボル