Redux 深入浅出，第 6 节：异步逻辑和数据获取 ​

import { client } from "../api/client";

const delayedActionMiddleware = (storeAPI) => (next) => (action) => {
  if (action.type === "todos/todoAdded") {
    setTimeout(() => {
      // 将这个 action 延迟1秒执行
      next(action);
    }, 1000);
    return;
  }

  return next(action);
};

const fetchTodosMiddleware = (storeAPI) => (next) => (action) => {
  if (action.type === "todos/fetchTodos") {
    // 发送 API 从服务器获取 todos
    client.get("todos").then((todos) => {
      // 使用获取到的 todos 数据来 dispatch 一个 action
      storeAPI.dispatch({ type: "todos/todosLoaded", payload: todos });
    });
  }

  return next(action);
};

const asyncFunctionMiddleware = (storeAPI) => (next) => (action) => {
  // 如果 action 实际上是一个函数...
  if (typeof action === "function") {
    // 调用该函数并传入 `dispatch` 和 `getState` 作为参数
    return action(storeAPI.dispatch, storeAPI.getState);
  }

  // 否则，它就是一个普通 action，那就继续执行
  return next(action);
};

const middlewareEnhancer = applyMiddleware(asyncFunctionMiddleware);
const store = createStore(rootReducer, middlewareEnhancer);

// 编写一个接收 `dispatch` 和 `getState` 作为参数的函数
const fetchSomeData = (dispatch, getState) => {
  // 发送一个异步 HTTP 请求
  client.get("todos").then((todos) => {
    // 使用获取的 todos 来 dispatch action
    dispatch({ type: "todos/todosLoaded", payload: todos });
    // 在 dispatch 后检查更新后的 store
    const allTodos = getState().todos;
    console.log("Number of todos after loading: ", allTodos.length);
  });
};

// 向 `dispatch` 传入 _函数_
store.dispatch(fetchSomeData);
// 打印日志：'加载完成后 todos 的数量：###'

import { createStore, applyMiddleware } from "redux";
// highlight-next-line
import thunkMiddleware from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer from "./reducer";

// highlight-next-line
const composedEnhancer = composeWithDevTools(applyMiddleware(thunkMiddleware));

// store 现在就可以在 `dispatch` 中接收 thunk 函数了
const store = createStore(rootReducer, composedEnhancer);
export default store;

import { client } from "../../api/client";

const initialState = [];

export default function todosReducer(state = initialState, action) {
  // 省略 reducer 逻辑
}

// Thunk 函数
// highlight-start
export async function fetchTodos(dispatch, getState) {
  const response = await client.get("/fakeApi/todos");
  dispatch({ type: "todos/todosLoaded", payload: response.todos });
}
// highlight-end

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import "./index.css";
import App from "./App";

import "./api/server";

// highlight-start
import store from "./store";
import { fetchTodos } from "./features/todos/todosSlice";

store.dispatch(fetchTodos);
// highlight-end

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

import { client } from "../../api/client";

const initialState = [];

export default function todosReducer(state = initialState, action) {
  switch (action.type) {
    // 省略其他 reducer cases
    // highlight-start
    case "todos/todosLoaded": {
      // 通过返回的新值完全替换现有 state
      return action.payload;
    }
    // highlight-end
    default:
      return state;
  }
}

export async function fetchTodos(dispatch, getState) {
  const response = await client.get("/fakeApi/todos");
  dispatch({ type: "todos/todosLoaded", payload: response.todos });
}

export async function fetchTodos(dispatch, getState) {
  const response = await client.get("/fakeApi/todos");

  // highlight-next-line
  const stateBefore = getState();
  console.log("Todos before dispatch: ", stateBefore.todos.length);

  dispatch({ type: "todos/todosLoaded", payload: response.todos });

  // highlight-next-line
  const stateAfter = getState();
  console.log("Todos after dispatch: ", stateAfter.todos.length);
}

async function saveNewTodo(dispatch, getState) {
  // ❌ 我们需要有新的 todo 文本，但它来自哪里？
  // highlight-next-line
  const initialTodo = { text };
  const response = await client.post("/fakeApi/todos", { todo: initialTodo });
  dispatch({ type: "todos/todoAdded", payload: response.todo });
}

// 编写一个接收 `text` 参数的同步外部函数：
export function saveNewTodo(text) {
  // 然后创建并返回异步 thunk 函数：
  return async function saveNewTodoThunk(dispatch, getState) {
    // ✅ 现在可以使用文本值并将其发送到服务器了
    const initialTodo = { text };
    const response = await client.post("/fakeApi/todos", { todo: initialTodo });
    dispatch({ type: "todos/todoAdded", payload: response.todo });
  };
}

import React, { useState } from "react";
import { useDispatch } from "react-redux";

// highlight-next-line
import { saveNewTodo } from "../todos/todosSlice";

const Header = () => {
  const [text, setText] = useState("");
  const dispatch = useDispatch();

  const handleChange = (e) => setText(e.target.value);

  const handleKeyDown = (e) => {
    // 如果用户按下 Enter 键：
    const trimmedText = text.trim();
    if (e.which === 13 && trimmedText) {
      // highlight-start
      // 使用用户编写的文本创建 thunk 函数
      const saveNewTodoThunk = saveNewTodo(trimmedText);
      // 然后 dispatch thunk 函数本身
      dispatch(saveNewTodoThunk);
      // highlight-end
      setText("");
    }
  };

  // omit rendering output
};

const handleKeyDown = (e) => {
  // 如果用户按下 Enter 键：
  const trimmedText = text.trim();
  if (e.which === 13 && trimmedText) {
    // highlight-start
    // 创建 thunk 函数并立即 dispatch
    dispatch(saveNewTodo(trimmedText));
    // highlight-end
    setText("");
  }
};

const initialState = [];

export default function todosReducer(state = initialState, action) {
  switch (action.type) {
    // highlight-start
    case "todos/todoAdded": {
      // 返回一个新的 todos state 数组，最后带有新的 todo 条目
      return [...state, action.payload];
    }
    // highlight-end
    // 省略其他 case
    default:
      return state;
  }
}