标签: redux-thunk

在我的商店中，我有一个具有以下形状的状态：{posts: [{...},{...}]}，但是当我mapStateToProps()在 Home.js 中使用时，状态返回{posts: []}，带有一个空数组（商店状态中曾经有一个数组）。

我是否使用mapStateToProps()不正确或者问题是否源于 Redux 周期的其他部分？

我正在使用的 API fetch，暂时位于 actions.js 中

// api

const API = "http://localhost:3001"

let token = localStorage.token
if (!token) {
    token = localStorage.token = Math.random().toString(36).substr(-8)
}

const headers = {
    'Accept': 'application/json',
    'Authorization': token
}

// gets all posts
const getAllPosts = token => (
    fetch(`${API}/posts`, { method: 'GET', headers })
);

动作和动作创建者，使用 thunk 中间件：

// actions.js

export const REQUEST_POSTS = 'REQUEST_POSTS';
function requestPosts (posts) { …

我正在开发一个react-with-redux应用程序，我正在使用redux-undo库，随着库的功能的发展，它会监听一系列操作，并在撤消发生时恢复到之前的状态。

场景：我有一个页面，其中将创建/删除列表项，并且每当这些操作发生时都会进行 API 调用。用户可以撤消创建和删除操作。

我想知道是否有任何方法可以知道已调度的最新操作。

例如：如果用户创建一个列表项并单击撤消，我想知道调度的最新操作是创建，以便我可以恢复创建（通过进行 API 调用删除列表项）。

同样，如果用户删除了一个列表项，我想知道最近调度的操作是删除，以便我可以恢复删除（通过进行 API 调用再次创建列表项，从过去的形状中获取详细信息状态并发送已删除列表项的详细信息）

请让我知道是否有任何方法可以实现这一目标？

我的商店是这样的：

export default configureStore({
  reducer: {
    sequencer: sequencerReducer,
    editMode: editModeReducer,
    tone: toneReducer,
    app: appReducer,
  },
  middleware: (getDefaultMiddleware) => {
    getDefaultMiddleware({ immutableCheck: false });
  },
});

我有一个工作thunk，但我需要这个immutableCheck: false配置。一旦设置，它似乎会覆盖默认的中间件，并且 thunk 不再工作。这是我的想法：

export const modCell = (step, noteOn) => (dispatch, getState) => {
  const selectedSound = getState().editMode.selectedSound;
  dispatch(sequencerSlice.actions.toggleCell({ step, selectedSound }));
};

这是我得到的错误：

Error: Actions must be plain objects. Use custom middleware for async actions.

有任何想法吗？

现在我已经有了这些用于上传 thunk 生命周期的操作。

type UPLOAD_START   = PayloadAction<void>
type UPLOAD_SUCCESS = PayloadAction<{ src: string, sizeKb: number }> 
type UPLOAD_FAILURE = PayloadAction<{ error: string }>

我想将它转换为createAsyncThunk调用，假设它会减少代码。但是会吗？

从https://redux-toolkit.js.org/api/createAsyncThunk上的示例来看，它应该是这样的：

const uploadThumbnail = createAsyncThunk(
  'mySlice/uploadThumbnail',
  async (file: File, thunkAPI) => {
    const response = await uploadAPI.upload(file) as API_RESPONSE
    return response.data   // IS THIS THE payload FOR THE fulfilled ACTION ?
  }
)

这是我将如何处理生命周期操作？

const usersSlice = createSlice({
  name: 'mySlice',
  initialState: // SOME INITIAL STATE,
  reducers: {
    // standard reducer logic, with …

当我们需要通过api获取一些数据并且我们在react中使用redux时，我们使用redux-thunk或saga，但我的问题是也可以通过组件useEffect钩子，我们在useEffect中调用api，然后使用redux存储中的action传递数据。

您好，我正在尝试redux从给定的数据中获取存储的初始数据api！

这是我使用的第一种方法store.dispatch：

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import reducer from "./reducer";
import { fetchNews } from "./actions";

const store = createStore(
    reducer,
    compose(
        applyMiddleware(thunk),
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
            window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);

store.dispatch(fetchNews());

export default store;

第二种方法是从组件生命周期方法分派操作，如下所示：

import React from "react";
import axios from "axios";
import InfiniteScroll from "react-infinite-scroller";
import { useSelector, useDispatch } from "react-redux";
import New from "./New";
import { fetchNews } from "../store/actions";

const Main = () …