标签: redux-thunk

我试图找出有关 redux 减速器的一些信息，但我认为术语可能会有所不同，因为这是 JavaScript。

假设有以下减速器：

import {
  ONE,
  TWO,
  THREE
} from "../actions/types";

export default function reducer(state = { /* some init state here */ }, action) {
  switch (action.type) {
    case ONE: {
      // this case takes 500ms to finish
      return {...state }
    }
    case TWO: {
       // this case takes 200ms to finish
       return {...state }
    }
    case THREE: {
       // this case takes 100ms to finish
       return {...state }
    }
    default: {
       return {...state }
    }
}; …

我正在开发一个在后端使用 NodeJS 并在前端使用 React + Redux 的 CRUD 应用程序。这是所有内容如何工作的快速模式：

添加项目

1. 用户输入帖子的标题
2. 标题然后被发送到调度它获取一个 POST在 NodeJS 中路由并通过正文发送标题
3. 在 NodeJS 路由中，我在集合中添加了一个具有该标题的新项目

后端完成，新帖子在服务器中

4. 我.then()在第 2 步中添加了调度函数。在其中我使用type: 'ADD_POST'和调度了一个动作post: post（我从 NodeJS 得到了帖子res.json({post: result from database})）

5. 在我的减速器中，我设置了一个 CASE 'ADD_POST': return action.post

前端完成，用户现在可以看到相同的帖子而无需刷新

我想使用相同的逻辑来更新特定帖子的喜欢。这是我到目前为止所做的：

1. 单击帖子上的按钮会触发获取 NodeJSPUT路由的调度
2. NodeJS 路由使用 ID 查找帖子并将帖子的旧值加 1

后端完成，现在服务器中还有 1 个类似的帖子

3. 我.then再次添加到调度中，该调度获取 NodeJS 路由，在该路由中我调度了一个动作type 'ADD_LIKE'并post ID更新了

4. 在 reducer 中，我设置了一个CASE 'ADD_LIKE':，它使用以下代码段中的代码遍历状态。

这是那个片段：

state.map(item => { …

我在里面有异步方法的动作，我想对它进行去抖动

export const onSearchChange = query => dispach => {
    if (query === "") {
        dispach({ type: SOME_TYPE, payload: query })
    } else {
        dispach({ type: SOME_TYPE, payload: query })
        searchProductsCall(query).then(payload => {
            dispach({ type: SOME_OTHER_TYPE, payload })
        })
    }
}

我怎样才能searchProductsCall使用lodash或其他东西去抖动？

我创建了一个包含电子邮件、名字、姓氏详细信息的表单。现在我想向 POST 请求localhost:5000/api/users并将其存储在 mongo 数据库中。如何使用 redux ？我只在 reactjs 上使用了它，我该如何使用 redux ？注意：我使用的是 redux thunk。

代码：

登录.js：

import React, { Component } from 'react'
import './login.css'

export default class Login extends Component {

  constructor(props) {
    super(props)
    this.state = {
      firstName:'',
      lastName:'',
      email:''
    }

    this.onChangeHandler = this.onChangeHandler.bind(this)
    this.onSubmitHandler = this.onSubmitHandler.bind(this)
  }

  onChangeHandler(e){
    this.setState({ [e.target.name]: e.target.value })
  }

  onSubmitHandler(e){
    e.preventDefault();
    console.log(this.state)
  }

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmitHandler}>
          <label>
            FirstName:
            <input type="text" name="firstName" value={this.state.firstName} onChange={this.onChangeHandler} />
          </label>

          <label>
            LastName:
            <input type="text" …

当我的组件使用componentDidMount. 但是调用 Redux 操作，使用 axios 进行调用似乎冻结了 UI。当我有一个包含 12 个输入的表单并且其中一个进行 API 调用时，我会假设我可以输入其他输入并且不会让它们冻结在我身上。

我尝试阅读有关该主题的其他一些帖子，但它们都有点不同，而且我尝试的所有内容似乎都无法解决问题。

我正在使用 React 16.8 在 linux 上工作（使用 RN 时我使用 55.4）

我已经尝试使我的componentDidMount异步以及 redux-thunk 动作。它似乎没有任何帮助，所以我一定是做错了什么。

我尝试执行以下操作但没有成功。只是使用我尝试过的简短形式。下面列出了实际代码。

async componentDidMount() {
    await getTasks().then();
}

我试过这个

export const getTasks = () => (async (dispatch, getState) => {
    return await axios.get(`${URL}`, AJAX_CONFIG).then();
}

当前代码：

组件.js

componentDidMount() {
    const { userIntegrationSettings, getTasks } = this.props;
    // Sync our list of external API tasks
    if (!isEmpty(userIntegrationSettings)) {
        getTasks(userIntegrationSettings.token)
            // After we fetch our …

export const FETCH_DB_BEGIN = 'FETCH_DB_BEGIN'
export const FETCH_DB_SUCCESS = 'FETCH_DB_SUCCESS'
export const FETCH_DB_FAILURE = 'FETCH_DB_FAILURE'

export const fetchDatabase = () => {
    return dispatch => {
        const profile_url = 'localhost:5000/profiles'
        const release_url = 'localhost:5000/releases'
        const emp_url = 'localhost:5000/users'
        let promises = []

        let options = {
            headers: header,
            method: 'get',
            mode: 'cors',
            body: null,
        }
        dispatch(fetchDbBegin());

        // run the script async. change state when it's done.
        let profile_promise = new Promise((resolve, reject) => {
            fetch(profile_url, options)
                .then(res => res.json())
                .then(resText …

我尝试了 redux 的所有命令，但它不起作用：您认为解决方案如何。这些是我试过的命令

yarn add react-redux
yarn add reduxjs / Redux-thunk#master
npm install --save Redux react-redux
npm install redux -- save
npm i redux -- save
yarn add redux-thunk

索引.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {createStore, applyMiddleware,compose} from 'redux';
import rootReducer from './store/reducers/rootReducer';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';
import {reduxFirestore,getFirestore} from 'redux-firestore'
import {reactReduxFirebase,getFirebase} from 'react-redux-firebase'
import fbConfig from './config/fbConfig';


const store=createStore(rootReducer,
    compose(
        applyMiddleware(thunk.withExtraArgument({getFirebase,getFirestore})),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig)
    )); …

我有点困惑，希望得到一个能帮助我理清思路的答案。假设我有一个后端（nodejs、express 等），我在其中存储我的用户及其数据，有时我想从后端获取数据，例如登录后的用户信息，或产品列表并保存他们在状态。

到目前为止，我的方法和我所看到的，我在组件加载之前获取数据并使用响应中的数据分派一个动作。但我最近开始深入研究这个，我看到了我之前知道的 react-thunk 库，并开始怀疑从后端/API 获取的最佳实践是什么？React Hooks 对这个话题有什么改变吗？知道这一点很重要吗？

我觉得有点傻，但找不到完全谈论这个话题的文章或视频:)

问题背景：

我正在构建一个 React/Redux 应用程序，它使用 redux-thunk 和 wretch（一个提取包装器）来处理异步请求。

我有一些搜索操作的加载时间可能会有很大差异，从而导致不良行为。

我曾考虑使用 AbortController()，但它要么彻底取消我的所有请求，要么未能取消前一个请求。

示例问题：

• 请求搜索“JOHN”，然后请求搜索“JOHNSON”。
• “JOHNSON”的结果首先返回，然后“JOHN”的结果稍后返回并覆盖“JOHNSON”的结果。

目标：

发起请求应该中止之前的未决请求。

示例所需的行为：

• 请求搜索“JOHN”，然后请求搜索“JOHNSON”。
• 在启动对“JOHNSON”的请求时，中止对“JOHN”的未决请求。

代码：

动作.js

通过 onClick 或其他函数调用 fetchData 操作。

import api from '../../utils/request';
export function fetchData(params) {
  return dispatch => {
    dispatch(requestData());
    return api
      .query(params)
      .url('api/data')
      .get()
      .fetchError(err => {
        console.log(err);
        dispatch(apiFail(err.toString()));
      })
      .json(response => dispatch(receiveData(response.items, response.totalItems)))
  }
}

export function requestData() {
  return {
    type: REQUEST_DATA,
    waiting: true,
  }
}

export function receiveData(items, totalItems) {
  return {
    type: RECEIVE_DATA,
    result: items,
    totalItems: totalItems, …

我有以下 redux-thunk 动作创建者：

function updateInitiator(form_request_id, { to_recipient }) {
  return (dispatch) => {
    const url = `/some/url`;
    const data = { to_recipient };

    return fetch(url, { method: 'PUT', body: JSON.stringify(data) }).then(() => {
      dispatch(fetchResponses());
    });
  };
}

然后我声明函数的类型：

type UpdateInitiator = typeof updateInitiator;

我正在尝试导出绑定 thunk 操作的类型。总之，当动作创建者“绑定”在反应-终极版，它会自动调用与返回的函数dispatch，然后返回的返回结果该内部函数。我正在尝试为这种行为声明一个类型。如果我在没有泛型的情况下这样做，它会起作用：

type BoundUpdateInitiator = (...args: Parameters<UpdateInitiator>) => ReturnType<ReturnType<UpdateInitiator>>;

但是当我尝试为任何绑定函数声明泛型类型时，我遇到了一些麻烦：

type BoundThunk<T> = (...args: Parameters<T>) => ReturnType<ReturnType<T>>;
type BoundUpdateInitiator = BoundThunk<UpdateInitiator>;

这给了我错误：

error TS2344: Type 'T' does not satisfy the constraint '(...args: …