Redux Toolkit 与单向数据流

List<TxEvent> events = txRepo.findByAccountId(id); // 只增不改的事件日志

BigDecimal balance = events.stream()
    .reduce(BigDecimal.ZERO, (acc, e) -> acc.add(e.signedAmount()));
    // 余额是折叠出来的「视图」：可重算、可审计

type CounterAction =
  | { type: "counter/increment" }
  | { type: "counter/addAmount"; payload: number };

// reducer：(state, action) => newState 的纯函数
function counterReducer(state: { value: number }, action: CounterAction) {
  switch (action.type) {
    case "counter/increment":
      return { value: state.value + 1 }; // 新对象，绝不动入参
    case "counter/addAmount":
      return { value: state.value + action.payload };
    default:
      return state;                      // 不认识的事件：原样返回
  }
}

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",                     // slice 名：action type 的前缀
  initialState: { value: 0 },
  reducers: {
    increment(state) {
      state.value += 1;                // 看似「直接改」？！往下看
    },
    addAmount(state, action) {
      state.value += action.payload;
    },
  },
});

// action creator 自动生成，type 字符串不用你写
export const { increment, addAmount } = counterSlice.actions;
export default counterSlice.reducer;

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
  reducer: { counter: counterReducer }, // 自动 combineReducers
  // 默认内置 thunk 中间件 + Redux DevTools，零配置
});

export type RootState = ReturnType<typeof store.getState>;

import { useSelector, useDispatch } from "react-redux";
import { increment } from "./counterSlice";
import type { RootState } from "./store";

function Counter() {
  const value = useSelector((s: RootState) => s.counter.value);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(increment())}>{value}</button>;
}

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

export const fetchTodos = createAsyncThunk(
  "todos/fetchAll",
  async () => {
    const res = await fetch("/api/todos");
    if (!res.ok) throw new Error("fetch failed"); // 抛错 → rejected
    return (await res.json()) as Todo[];
  }
);

const todosSlice = createSlice({
  name: "todos",
  initialState: {
    items: [] as Todo[],
    status: "idle" as "idle" | "loading" | "succeeded" | "failed",
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (s) => { s.status = "loading"; })
      .addCase(fetchTodos.fulfilled, (s, a) => {
        s.status = "succeeded";
        s.items = a.payload;            // Immer：写法随意，产出不可变
      })
      .addCase(fetchTodos.rejected, (s) => { s.status = "failed"; });
  },
});