如何在React-Redux同一切片的另一个方法中调用切片方法？

你的代码存在两个核心问题：

• Redux的reducer必须是纯函数，不能包含异步操作（比如await axios.get），reducer仅负责同步更新状态，不能处理副作用。
• 在reducer内部无法直接调用另一个reducer函数，状态更新只能通过分发（dispatch）action触发。

下面是符合Redux规范的正确实现方式，使用Redux Toolkit官方推荐的createAsyncThunk处理异步请求：

1. 创建异步Thunk函数 #

首先把请求数据的异步逻辑抽离成独立的thunk：

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

// 异步Thunk：根据查询关键词获取电影数据
export const fetchMovieResults = createAsyncThunk(
  'movie/fetchResults',
  async (query, { rejectWithValue }) => {
    if (!query.trim()) {
      return rejectWithValue('查询关键词不能为空');
    }
    try {
      // 替换为你的实际API地址，注意编码查询参数避免错误
      const url = `https://your-api-domain.com/search?query=${encodeURIComponent(query)}`;
      const response = await axios.get(url);
      return response.data;
    } catch (error) {
      // 捕获请求错误，返回自定义错误信息
      return rejectWithValue(error.response?.data || '数据请求失败');
    }
  }
);

2. 修改Slice定义 #

在slice中仅保留同步更新query的reducer，通过extraReducers监听异步thunk的状态变化来更新结果：

export const movieSlice = createSlice({
  name: 'movie',
  initialState: {
    query: '',
    movie_results: [],
    loading: false, // 新增加载状态
    error: null,    // 新增错误状态
  },
  reducers: {
    setQuery: (state, action) => {
      // 仅同步更新query状态
      state.query = action.payload;
    },
    // 可选：新增清空结果的同步reducer
    clearMovieResults: (state) => {
      state.movie_results = [];
      state.error = null;
    }
  },
  extraReducers: (builder) => {
    builder
      // 请求发起时：标记加载中，清空错误
      .addCase(fetchMovieResults.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      // 请求成功：更新结果，结束加载
      .addCase(fetchMovieResults.fulfilled, (state, action) => {
        state.loading = false;
        state.movie_results = action.payload;
      })
      // 请求失败：标记错误，结束加载
      .addCase(fetchMovieResults.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  },
});

// 导出同步action
export const { setQuery, clearMovieResults } = movieSlice.actions;

// 导出reducer供store使用
export default movieSlice.reducer;

3. 在组件中使用 #

在组件中通过dispatch分别触发setQuery和异步thunk，或者通过useEffect监听query变化自动发起请求：

import { useDispatch, useSelector } from 'react-redux';
import { setQuery, fetchMovieResults, clearMovieResults } from './movieSlice';
import { useEffect } from 'react';

function MovieSearch() {
  const dispatch = useDispatch();
  const { query, movie_results, loading, error } = useSelector(state => state.movie);

  // 方式1：点击按钮手动触发搜索
  const handleSearch = () => {
    if (query.trim()) {
      dispatch(fetchMovieResults(query));
    } else {
      dispatch(clearMovieResults());
    }
  };

  // 方式2：监听query变化，自动发起搜索（可选）
  useEffect(() => {
    if (query.trim()) {
      // 可以加防抖避免频繁请求
      const timer = setTimeout(() => {
        dispatch(fetchMovieResults(query));
      }, 300);
      return () => clearTimeout(timer);
    } else {
      dispatch(clearMovieResults());
    }
  }, [query, dispatch]);

  return (
    <div className="search-container">
      <input
        type="text"
        value={query}
        onChange={(e) => dispatch(setQuery(e.target.value))}
        placeholder="输入电影名称搜索..."
      />
      <button onClick={handleSearch} disabled={loading}>
        {loading ? '搜索中...' : '搜索'}
      </button>

      {error && <p className="error-message">{error}</p>}
      
      <div className="results">
        {loading ? (
          <p>加载中...</p>
        ) : (
          <ul>
            {movie_results.map(movie => (
              <li key={movie.id}>{movie.title}</li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default MovieSearch;

关键说明 #

• Redux的reducer必须保持纯函数特性，所有副作用（网络请求、定时器、本地存储操作等）都要放在thunk、saga或其他中间件中处理。
• createAsyncThunk会自动生成三种状态的action（pending/fulfilled/rejected），通过extraReducers可以方便地响应这些状态来更新UI所需的加载、错误、数据状态。

内容的提问来源于stack exchange，提问作者Shehan DMG