简单版：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;