簡單版：React 中redux子產品：函數元件使用

步驟

1、生成cra架構

2、布局

3、定義倉庫

4、使用倉庫

5、更新

1、生産car架構

create-react-app  test1  
           

2、布局

建立src/index.js

import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
           

建立App.jsx

import Carts from "./pages/carts/Index";

function App() {
  return (
    <fieldset>
      <legend>App</legend>

      <Carts />
    </fieldset>
  );
}

export default App;
           

建立carts/Index.jsx

function Carts() {
  return (
    <table border={1} cellPadding={10} cellSpacing={0}>
      <thead>
        <tr>
          <th>編号</th>
          <th>标題</th>
          <th>價格</th>
          <th>數量</th>
          <th>小計</th>
        </tr>
      </thead>
      <tbody>
        <tr >
        <td>編号</td>
        <td>标題</td>
        <td>價格</td>
        <td>數量</td>
        <td>小計</td>
        </tr>
      </tbody>
    </table>
  );
}

export default Carts;
           

3、定義倉庫

src/store/index.js

import {createStore, combineReducers } from 'redux'   // yarn add redux 


import carts from '../pages/carts/store'


export default createStore(combineReducers({
	carts,
	// orders,
}))
           

src/pages/carts/store/index.js

// 定義reducer
let initData = {
  carts: [
    { id: 1, title: "商品1", num: 1, price: 1.11 },
    { id: 2, title: "商品2", num: 2, price: 2.22 },
    { id: 3, title: "商品3", num: 3, price: 3.33 },
  ],
};
const reducer = (state = initData, action) => {
  switch (action.type) {
    case "CARTS_ADD":
      state.carts[action.payload].num++;
      break;
    case "CARTS_DEL":
      state.carts[action.payload].num--;
      break;
    default:
      break;
  }
  return state;
};

export default reducer;
           

src/pages/carts/store/actionCreator.js

export const postCartsAddAction = (i) => {
  // 異步請求
  return {
    type: "CARTS_ADD",
    payload: i,
  };
};

export const postCartsDelAction = (i) => {
  // 異步請求
  return {
    type: "CARTS_DEL",
    payload: i,
  };
};
           

4、使用

import { useState } from "react";
import store from "../../store";

function Carts() {
  let [carts, setCarts] = useState(store.getState().carts.carts);

  return (
    <table border={1} cellPadding={10} cellSpacing={0}>
      <thead>
        <tr>
          <th>編号</th>
          <th>标題</th>
          <th>價格</th>
          <th>數量</th>
          <th>小計</th>
        </tr>
      </thead>
      <tbody>
        {carts.map((item, i) => {
          return (
            <tr key={i}>
              <td>{item.id}</td>
              <td>{item.title}</td>
              <td>{item.price}</td>
              <td>
                {item.num}
              </td>
              <td>小計</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default Carts;
           

5、更新

import { useState } from "react";
import { postCartsDelAction, postCartsAddAction } from "./store/actionCreator";
import store from "../../store";
import { useEffect } from "react";

function Carts() {
  let [carts, setCarts] = useState(store.getState().carts.carts);

  // componentDidMount
  useEffect(() => {
    store.subscribe(() => {
      setCarts([...store.getState().carts.carts]);
    });
  }, []);

  return (
    <table border={1} cellPadding={10} cellSpacing={0}>
      <thead>
        <tr>
          <th>編号</th>
          <th>标題</th>
          <th>價格</th>
          <th>數量</th>
          <th>小計</th>
        </tr>
      </thead>
      <tbody>
        {carts.map((item, i) => {
          return (
            <tr key={i}>
              <td>{item.id}</td>
              <td>{item.title}</td>
              <td>{item.price}</td>
              <td>
                <button onClick={() => store.dispatch(postCartsDelAction(i))}>
                  -
                </button>
                {item.num}
                <button onClick={() => store.dispatch(postCartsAddAction(i))}>
                  +
                </button>
              </td>
              <td>小計</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default Carts;