标签: redux-thunk

Redux Toolkit可以做什么，或者在RTK Query做不到的方面做得很好？我知道 RTQ Query 可以更轻松地用更少的代码执行数据获取和缓存，但是为什么一些以 Node.js 和 MongoDB 作为后端的项目使用Redux Toolkit 中的createAsyncThunk()而不是RTQ Query 中的createApi() ？

我有以下行动

export function getAllBooks() {
  return function(dispatch) {
     return axios.get('http://localhost:8080/books')
    .then(response => dispatch(retrieveBooks(response.data)));
  };
}

问题是当我调用此操作时，我进入了控制台

Uncaught (in promise) TypeError: dispatch is not a function at eval (eval at ...

那就是dispatch在.then(response => dispatch(retrieveBooks(response.data)));玩起来

我尝试删除除 redux-thunk 之外的所有其他中间件无济于事

唯一使用动作的地方是

const mapDispatchToProps = (dispatch) => {
  return { fetchBooks : () => dispatch(getAllBooks) };
}

我有一个动作创建者，该动作创建者进行了昂贵的计算，并在用户每次输入内容时都会分派一个动作（基本上是实时更新）。但是，如果用户输入了多个内容，则我不希望以前的昂贵计算能够完全运行。理想情况下，我希望能够取消执行先前的计算并仅执行当前的计算。

所以我正在使用react + redux,我继续得到以下错误:"无法读取属性'然后'未定义".由于某种原因,承诺不会被退回.我也特别擅长使用redux thunk.

减速器

import { merge } from 'lodash';
import  * as APIutil  from '../util/articles_api_util';


import {
  ArticleConstants
} from '../actions/article_actions';

const ArticlesReducer = (state = {}, action) => {
  switch (action.type) {
    case ArticleConstants.RECEIVE_ALL_ARTICLES:
    debugger
    return merge({}, action.articles);
    default:
      return state;
  }
};

export default ArticlesReducer;

商店

import { createStore, applyMiddleware } from 'redux';
import RootReducer from '../reducers/root_reducer';
import thunk from 'redux-thunk';

import  * as APIUtil  from '../util/articles_api_util';

export const ArticleConstants = {
    RECEIVE_ALL_ARTICLES: "RECEIVE_ALL_ARTICLES",
    REQUEST_ALL_ARTICLES: "REQUEST_ALL_ARTICLES" …

经典问题 - 我想在提交之前验证表单.

我的提交按钮触发一个动作(简单的调度或thunk).如果表单有效,请提交 - 否则,触发错误消息.

简单的解决方案:调度一个动作,例如VALIDATE_AND_SUBMIT,它在reducer中将验证表单,并提交或设置错误状态.

我觉得这些是两种不同的行为:有效

{
   type: "VALIDATE",
   formData
}

这应验证并设置错误.

{
   type: "SUBMIT",
   // get form data and errors from state
}

提交 - 如果没有错误状态,则应提交.

即使我使用redux-thunk,我也无法从第一个VALIDATE操作获得反馈.我的思维过程是反模式吗？如何在提交表单之前进行验证？

我想发送一个操作来使用当前登录的用户更新我的应用程序的全局状态.当用户单击一个按钮时,会触发一个事件处理程序mapDispatchToProps,然后我会调度一个action(article.updateAuthor(currentUser)).但是,mapDispatchToProps我无法访问状态以获取当前用户,并且我不想随意将当前已登录的用户传递给组件道具 - 仅传递给上面的click事件,然后传递给用户数据到已分派的操作.

我知道我可以用redux thunk发送一个动作,让我可以访问状态.然而,由于没有进行API调用,因此看起来相当沉重.

有没有人遇到过这个问题？

我正在使用redux-thunk来管理我的react应用程序中的异步内容,并且我想使用redux-observable来更轻松地管理复杂的异步流(例如,连接多个Ajax调用).有没有办法这样做而不修改已经完成的工作？

这是我的意思的一个例子:

const fetchSomeData = () => {
    return (dispatch, getState) => {
        doAnAjaxCall((err, response) => {
            if (err) return dispatch({type: 'ERROR', err})
            // do something
            return dispatch({type: 'SUCCESS', response})
        })
    }
}

是否可以fetchSomeData在史诗中使用？
由于redux-thunk是基于promise的redux-observable应该允许的,我错过了什么吗？

我的项目正在使用react，redux和redux-thunk。

我想等待功能结束，然后再启动清除页面的功能。不幸的是，我在.then中访问函数时遇到问题

这是我以前的没有承诺的代码，然后：

this.props.dispatch(ScheduleAction(..))
this.props.deleteTab()

问题是在将信息发送到我的服务器之前有时调用了deleteTab（），所以效果不是很好。

然后我做到了：

Promise.resolve(this.props.dispatch(ScheduleAction(..)))
  .then(function(response) {
         this.props.deleteTab();
         console.log("TabDeleted !!!");
         return response
   })

现在的问题是我无法访问 this.props.deleteTab();

我有这个错误：

未捕获（承诺）TypeError：无法读取未定义的属性“ props”

如果有人对如何通过.then中的道具进行修复有任何想法，请先谢谢！

我正在尝试将 redux-thunk 连接到 Next.js，如果我的 thunk 返回一个 promise，它就可以正常工作。如何将其转换为使用 async/await？我看了这篇文章（如何异步/等待 redux-thunk 操作？）但我无法理解它。

我getInitialProps在我的 index.js 是

static  getInitialProps(props) {
    const {store, isServer} = props.ctx;
    if (!store.getState().placeholderData) {
      return store.dispatch(loadData());
    }

目前我处理加载数据的操作是

export const loadData = () => (dispatch) => {
  return isoFetch(homeES_endpoint)
    .then(res => res.json())
    .then(data => dispatch(loadDataSuccess(data)))
      .catch(err => console.error('error loading data', err.toString()));
}

我如何将 loadData 转换为使用 async/await？我试过了

export const loadData =  () => async (dispatch) => {
  try {
    const res = await isoFetch(homeES_endpoint);
    const …

我似乎无法从 我对 Typescript 相当陌生的人那里收到PromisefromcreateAsyncThunk函数Redux-toolkit，我正在努力弄清楚为什么它会给我 Property 'then' does not exist on type 'AsyncThunkAction<Student, number, {}>'错误，即使如果我删除打字，承诺确实会返回。这是我的createAsyncThunkfn

export const getStudentByIdRequest = createAsyncThunk<Student, number>(
  'student/getStudentByIdRequest',
  async (id, { rejectWithValue }) => {
    try {
      const { data } = await instance.get(`student/${id}/`)
      return data
    } catch (err) {
      let error: AxiosError = err
      if (error) {
        return rejectWithValue({
          message: `Error. Error code ${error.response?.status}`,
        })
      }
      throw err
    }
  }
)

这就是我从React组件中发送它的方式

dispatch(getStudentByIdRequest(userId)).then((res) => console.log(res)) …