标签: redux-thunk

如何对自定义redux中间件进行单元测试？我有这个简单的函数,应该在给定的超时后发送动作但是...我不知道如何处理它.我找到了关于这个问题的足够资源.

const callAPiTimeoutMiddleware = store => next => (action) => {
  if (action[CALL_API]) {
    if (action[CALL_API].onTimeout) {
      setTimeout(() => {
        store.dispatch({ type: action[CALL_API].onTimeout });
      }, DEFAULT_TIMEOUT_LENGTH);
    }
  }

  return next(action);
}

这些是基于博客文章的测试,在接受的答案中提到:

describe('callAPiTimeoutMiddleware', () => {
  describe('With [CALL_API] symbol', () => {
    it('should dispatch custom action', () => {
      const clock = sinon.useFakeTimers();
      const fakeStore = { dispatch: sinon.spy() };
      const fakeNext = sinon.spy();
      const fakeAction = {
        [CALL_API]: {
          endpoint: 'endPoint',
          method: 'METHOD',
          types: ['REQUEST_TYPE', 'SUCCESS_TYPE', 'FAILURE_TYPE'],
          onTimeout: 'TIMEOUT_TYPE', …

如何在react-redux项目错误屏幕截图中解决此错误 警告:失败的道具类型:道具store标记为必需Provider,但其值为undefined.在提供者

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import SignUp from './Components/SignUp'
import SignIn from './Components/SignIn'
import Home from './Components/Home'
import { Router, Route, hashHistory, IndexRoute, browserHistory } from 'react-router';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {firebaseApp} from './Database/firebaseApp'
import {Provider} from 'react-redux'
import {store} from './Store/Store'
import {logUser} from './Store/Actions'

ReactDOM.render(
  <MuiThemeProvider>
    <Provider store={store}>
      <Router history={browserHistory} >

        <Route path="/signup" component={SignUp} ></Route>
        <Route path="/signin" component={SignIn} …

我来自Reflux到Redux.在Reflux中你的业务逻辑只存在于商店中,但在Redux中它似乎不同......例如在" Redux "中,我有"async-action",我用" redux-thunk " 实现它.

在一个场景中,我想在我的操作中检查一些内容,如果需要我向服务器发送请求并获取一些数据.在这种情况下,我必须在我的行动中检查我的逻辑,实际上我的业务逻辑存在于行动中并存储在一起并且它不好......你的解决方案是什么？

例如我有复选框,我检查一些条件,如果结果是真的我发送请求到服务器这里是我的动作代码,因为你看到我的业务逻辑是在我的行动和我的减速机:

export function onCheckboxClick({itemId}) {
  return (dispatch, getState) => {
      let state = getState().get('myReducer');

      let myConditionResult = state.get('foods').get(0).get('test');//for exmaple check some condition in my store

      dispatch({type: 'CHECKBOX_CLICK', itemId});// for change the checkbox checked

      if (myConditionResult) {
        myApi.deleteOrderItem({itemId}).then(()=> {
          dispatch({type: 'DELETE_ORDER_ITEM_FULFILLED', itemId});
        }).catch((err)=> {
          console.log(err);
          dispatch({type: 'DELETE_ORDER_ITEM_REJECTED', itemId});
        });
      }
   };
}

提前致谢

我正在使用redux-saga,但我遇到了一个问题:redux-auth-wrapper需要redux-thunk来进行重定向,所以我只是在我的商店中添加了thunk:

  import {createStore, compose, applyMiddleware} from 'redux';
  import createLogger from 'redux-logger';
  import {routerMiddleware} from 'react-router-redux';
  import {browserHistory} from 'react-router';
  import thunk from 'redux-thunk';
  import createSagaMiddleware, {END} from 'redux-saga';
  import sagas from '../sagas';
  import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
  import rootReducer from '../reducers';
  import _ from 'lodash';
  import {loadState, saveState} from '../connectivity/localStorage';

  const persistedState = loadState();

  const routerMw = routerMiddleware(browserHistory);
  const loggerMiddleware = createLogger();
  const sagaMiddleware = createSagaMiddleware();

  function configureStoreProd() {
    const middlewares = [
      // Add other middleware on this line...

      routerMw, …

我正在开发一个Redux应用程序,其中许多过滤器组件可以改变要执行的搜索的性质.每当其中一个过滤器组件的状态发生变化时,我想重新运行搜索操作.但是,我似乎无法正确地调用每个过滤器组件的搜索操作.

这是主要的搜索操作:

// actions/search.js
import fetch from 'isomorphic-fetch';
import config from '../../server/config';

export const receiveSearchResults = (results) => ({
  type: 'RECEIVE_SEARCH_RESULTS', results
})

export const searchRequestFailed = () => ({
  type: 'SEARCH_REQUEST_FAILED'
})

export const fetchSearchResults = () => {
  return (dispatch, getState) => {
    // Generate the query url
    const query = getSearchQuery();  // returns a url string
    return fetch(query)
      .then(response => response.json()
        .then(json => ({
          status: response.status,
          json
        })
      ))
      .then(({ status, json }) => {
        if (status …

import React from "react";
import { render } from "react-dom";
import { createStore, applyMiddleware } from "redux";
import { Provider, connect } from "react-redux";
import thunk from "redux-thunk";

const disabled = (state = true, action) => {
  return action.type === "TOGGLE" ? !state : state;
};

class Button extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.disabled !== this.props.disabled && !this.props.disabled) {
      //  this.ref.focus();  // uncomment this to see the desired effect
    }
  }
  render() {
    const { props } = this; …

我有一个简单的组件,当用户加载页面时调用一个动作,并且在该动作中,我试图调度另一个动作来将loggedIn商店的状态设置为true或false:

import React, { Component } from 'react'
import { Link, browserHistory } from 'react-router'
import $ from 'jquery'

class Login extends Component {

  constructor(props) {
    super(props)
  }
  componentDidMount() {
    this.props.actions.guestLoginRequest()
  }
  render() {
    return (
      <div>
        <div classNameName="container">
          <div className="row">
            We are signing you in as a guest
          </div>
        </div>
      </div>
    )
  }
}

export default Login

我可以在guestLoginRequest调用操作时获取登录信息,但是当我尝试在其中调度另一个操作时,没有任何反应:

guestLoginRequest: function(){
    var ref = new Firebase("https://penguinradio.firebaseio.com");
    ref.authAnonymously(function(error, authData) {
      if (error) {
        console.log("Login Failed!", error);
      } …

我正在使用redux-thunk中间件构建一个React/Redux应用程序来创建和处理Ajax请求.我有一个特别经常被触发的thunk,我想在解雇之前取消任何先前启动的Ajax请求.这可能吗？

我无法设置getState()to的返回类型RootState。我正在使用打字稿和 VSCode。我必须将类型设置为any，这会停止该对象上的 IntelliSense。下面是有问题的代码：

export const unsubscribeMeta = createAsyncThunk(
  'meta/unsubscribe',
  async (_, { getState }) => {
    const { meta } = getState() as any;
    const res = await client.post<apiUnsubscribeResponse>(
      `/meta/unsubscribe/${meta.subscriptionId}`
    );
    return res.data.data;
  }
);

如果我尝试使用RootState而不是any，VSCode 会在模块中标记许多错误。我相信这是由于商店和这个切片的循环依赖。我RootState在模块中的许多地方使用了选择器，没有问题。有没有解决的办法？

对于我的 React 应用程序，我构建了许多自定义中间件并在applyMiddleware(). 因为我有这么多，redux 存储文件看起来有点拥挤。将它们全部applyMiddleware()传递到函数中或将它们导入到函数内的单独文件中，然后将该函数传递到函数中applyMiddleware()以保持清洁是一种好习惯吗？

// Redux store
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const store = createStore(
  reducers,
  composeEnhancers(
    applyMiddleware(...xMdl, ...yMdl, ...zMdl, ...nAmountsOfMdl),
  )
);