标签: redux-thunk

关于减速器与动作的新手问题。来自 redux 文档：

\n

操作描述了发生了某些事情的事实，但不指定应用程序状态如何更改以响应。

\n

和

\n

给定相同的参数，reducer 应该计算下一个状态并返回它。没有什么惊喜。无副作用。没有 API 调用。没有突变。\n 只是一个计算。

\n

因此，如果我们考虑以下场景：

\n
1. 用户可以在地图上放置点并获取这些点之间的路线。
\n
2. 当用户第一次单击地图时，这是他的起点。当他第二次点击时——这就是他的终点。随后的单击会在前一个点和结束位置之间添加点。
\n
3. 添加每个点后（第一个点除外）必须计算新点和前一个点之间的路线。因此，如果我有 S -> A -> F 并添加点 B (S -> A -> B -> F) 必须计算两条路线 A -> B 和 B -> F
\n

因此，在添加任何 3 个以上的点时，我们会产生两个副作用：

\n
• 新点未放置在列表末尾
\n
• 必须计算到达终点的新路线。
\n

如果我将我的 Point 结构建模如下：

 // typescript\ninterface Point {\n  coordinates;\n  routeTo?;\n}\n

我在操作中执行项目位置计算和路线检索是否正确，例如：

  // pseudo code\n    export function …

如果我有这样的代码，

    dispatch({
        type: actionTypes.ABCD,
        ...newInfo,
    });
    const state = getState();

我可以 100% 相信state是最新状态吗？或者是dispatch异步的，我无法保证状态是否已更新？

我希望能够在我的反应本机应用程序中“持续”监视设备连接。

我已经成功使用 redux-thunk 和 redux 了。

其实我可以做到这一点

import { NetInfo } from 'react-native';

import {
    CONNECTION_CHECKING,
    CONNECTION_AVAILABLE,
    CONNECTION_UNAVAILABLE, 
} from './types';


export const connectionChecking = () => {
    return (dispatch) => {

        dispatch ({
            type: CONNECTION_CHECKING
        });

        NetInfo.getConnectionInfo()
            .then((connectionInfo) => {

                console.log('Connection info: ', connectionInfo);
                switch (connectionInfo.type) {
                    case 'cellular':
                        dispatch ({
                            type: CONNECTION_AVAILABLE,
                            payload: connectionInfo.type
                        });
                        break;
                    case 'wifi':
                        dispatch ({
                            type: CONNECTION_AVAILABLE,
                            payload: connectionInfo.type
                        });
                        break;
                    default:
                        dispatch ({
                            type: CONNECTION_UNAVAILABLE,
                        });
                }
            })
            .catch((error) => console.warn(error));

    }; …

我正在开发一个有多个切片的应用程序。我正在使用createAsyncThunkAPI 调用，我喜欢它，因为它为 API 请求的不同状态提供了动作创建器，以便我可以跟踪减速器中的加载状态和错误。但我的问题是，如果我想有一个单独的减速器来跟踪loading，error以及success我的 API 调用，我该如何实现redux-toolkit

我知道我可以dispatch从我的createAsyncThunk函数中执行一个操作，但感觉不对，并且有点违背了函数本身的目的。此外，减速器内部的副作用被认为是一种不好的做法。所以，我在这一点上有点困惑，我想Loader在应用程序的根目录中只有一个组件，当加载状态为真时触发，并且加载的内容并不重要

这是我当前代码的示例：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { AxiosError } from 'axios'
import { masterInstance } from 'api'
import { GetAccessCodeParams, RegistrationStateType } from 'store/slices/registration/types'

export const getAccessCodeRequest = createAsyncThunk<void, GetAccessCodeParams, { rejectValue: { message: string } }>(
  'registration/getAccessCodeRequest',
  async ({ email }, { rejectWithValue }) => {
    try {
      await masterInstance.post(`/authorization/getAccessCodeWc`, { email })
    } …

我应该使用哪一个？对于更多上下文，我使用 redux-toolkit。欢迎提供帮助了解哪种工具更适合的建议

所以我想访问我的状态的当前状态以state.formLogin存储在变量中userCredentials我如何才能访问 createAsyncThunk 上的状态？

export const loginAsync = createAsyncThunk(
  "user/login",
  async () => {
    try {
      const { content } = await login(userCredentials);
      localStorageHelpers.setUserToken(content.token);
      localStorageHelpers.setUserId(content.userId);
      return content.userId;
    } catch (err) {
      console.log(err)
    }
  }
);

我试图找出为什么我的异步 thunk 调用没有按预期工作。当我的网站首页加载时，我试图从数据库中提取 JSON 对象数组。现在，API 已被调用，数据已被提取，但动作创建者和切片之间出现了一些问题。我正在尝试console.log action，state但也没有任何结果。

我刚刚学习，redux-toolkit所以对此还很陌生。

这是我的切片：

import { createSlice } from '@reduxjs/toolkit'

const prizesSlice = createSlice({
  name: 'prizes',
  initialState: {
    prizesArray: [],
  },
  reducers: {
    getPrizes(state, action) {
      console.log('hello')
      state.prizes = action.payload
    },
  },
})

export const prizesSliceActions = prizesSlice.actions
export default prizesSlice

这是动作创建者：

import { prizesSliceActions } from './prizes-slice'
import { createAsyncThunk } from '@reduxjs/toolkit'
import * as api from '../apiClient'

// get data
export const fetchPrizeData = createAsyncThunk(
  'prizesArray/getPrizes', …

求助:字段形式的defaultValue不是我想象的那样.

我不知道我在做什么[化学狗图片在这里].

我的组件称为loadForm,并通过thunk操作从API调用加载数据:

class loadForm extends Component {
  constructor(props) {
   super(props);
  }
  /*  Loads data to the form */
  componentDidMount() {
    let action = getAppoThunk(this.props.routeParams.id);
    this.props.dispatch(action);
    console.log('DidMount  appoArray>>'+ JSON.stringify(this.props.appo));
 }

componentWillReceiveProps(nextProps) {
  if (Object.keys(nextProps.appoArrayProp).length  !=  Object.keys(this.props.appoArrayProp).length ) {
  console.log('WWWW  NOT THE SAME nextProps  >>'+ JSON.stringify(nextProps.appo));
  console.log('WWWW  NOT THE SAME thisProps  >>' + JSON.stringify(this.props.appo));
  let action = getAppoThunk(this.props.routeParams.id);
  this.props.dispatch(action);  // thunk middleware dispatch
} else {
  console.log('ARE THE SAME this.props.appo>>' + JSON.stringify(this.props.appo));
}

}

渲染:

   return(
     <form onSubmit={this.handleSubmit}> …

在我的React/Redux应用程序中,我有一些异步操作.假设用户getData向服务器发起请求.立即GET_DATA_REQUEST被分派和getDataAJAX调用是在它的途中到服务器.

成功或失败后,将相应地分派一个GET_DATA_SUCCESS或多个GET_DATA_FAILURE动作,并将数据呈现给UI.

现在,我希望我的应用程序将历史状态(使用react-router-redux)作为对AJAX回调的反应.意思是,一旦成功,用户被"重定向"到另一个URL(路由),显示依赖于新接收的数据的不同模块.

我意识到在reducer中使用这个功能是一个非常糟糕的主意,因为它不再是纯粹的(URL更改是副作用).

有什么想法吗？

谢谢

我尝试在几秒钟后将用户从一个组件重定向到另一个组件。

用户登陆页面，几秒钟后，他将自动重定向到另一页面。我曾想过要重定向一个动作，但是我不确定这是否是最好的主意（如果您有更简单的方法，我很感兴趣）。

到目前为止，我的代码：

基本组成部分：

import React, { Component } from "react";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import { redirectToProfile } from "../../actions/searchActions";

class Search extends Component {
  componentDidMount() {
    setTimeout(this.props.redirectToProfile(this.props.history), 3000);
  }
  render() {
    return (
      <div>
        <h1>search page</h1>
      </div>
    );
  }
}

export default connect(
  null,
  { redirectToProfile }
)(withRouter(Search));

和动作：

export const redirectToProfile = history => {
  history.push("/");
};

到目前为止，我有一条错误消息：

动作必须是普通对象。使用自定义中间件进行异步操作。

经过研究后，我发现有人解决了中间件重装问题，但是我已经在使用它了，所以我不知道该怎么做。谢谢您的帮助。