标签: redux-thunk

我使用redux，react-redux，react-router，react-router-redux和redux-thunk。

import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { browserHistory } from 'react-router'
import { routerMiddleware } from 'react-router-redux'
import  thunkMiddleware from 'redux-thunk'
...    
const reduxRouterMiddleware = routerMiddleware( browserHistory )

const store = createStore(
    mainReducer,
    applyMiddleware(reduxRouterMiddleware, thunkMiddleware)
)

结果我希望能够进行及时的调度

dispatch(...).then()

但是我收到的消息then不是调度功能。

我该怎么做？

所以在我的 React 组件中，我有这个：

this.props.updateAlertCallback('error', ERROR_MESSAGE)

我的updateAlertCallback做法是：

export const updateAlert = (alert, message) => {
  return {
    type: 'UPDATE_ALERT',
    alert,
    message
  }
}

export const updateAlertCallback = (alert, message) => {
  return dispatch => {
    return dispatch(updateAlert(alert, message)).then(() => {
      console.log('Done!');
    });
  }
}

我收到以下错误：Uncaught TypeError: dispatch(...).then is not a function

updateAlert运行完成后记录某些内容的正确方法是什么？

所以,我遇到了一个问题,一个操作返回上面提到的错误(参见附图),而不是按预期更新redux状态.我在这里俯瞰什么？

actionCreators.js

export function userToken(token) {
  console.log('userToken has been fired');
  return (dispatch) => {
    dispatch({
      type: 'Graphcool_Token',
      payload: token
    });
  } 
}

App.js

....
// Root Query
const allPostsCommentsQuery = graphql(All_Posts_Comments_Query, {
  options: {
    cachePolicy: 'offline-critical', 
    fetchPolicy: 'cache-first',
  },
});

export const mapDispatchToProps = (dispatch) => {
  return bindActionCreators(actionCreators, dispatch);
}

export default compose(
  allPostsCommentsQuery,
  connect(mapDispatchToProps)
)(Main);

减速器

var tokenDetails = function(state, action) {

  if (state === undefined) {
    state = [];
  }

  switch (action.type) {
    case 'Graphcool_Token':
      const newState …

我已经用这个标题倾注了所有问题,但我找不到可以防止此错误的解决方案.我到目前为止所尝试的是确保我不会混淆新旧redux api,我正在使用babel进行转换,所以没有打字原则解决方案适用,我已经确保我在相关动作中返回一个函数,我已经注释掉我的导入或thunk以确保它中断并且我在导入它之后注销了thunk并且我得到了一个函数,并且我已经从depricated版本更新了devtools扩展.没有成功.任何帮助深表感谢.相关代码如下:

商店:

const redux = require('redux');
const {combineReducers, createStore, compose, applyMiddleware} = require('redux');
import {default as thunk} from 'redux-thunk';

const {nameReducer, hobbyReducer, movieReducer, mapReducer} = require('./../reducers/index');

export const configure = () => {

    const reducer = combineReducers({
        name: nameReducer,
        hobbies: hobbyReducer,
        movies: movieReducer,
        map: mapReducer
    });

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

    const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)));   

    return store;
};

操作:

export let startLocationFetch = () => {type: 'START_LOCATION_FETCH'};

export let completeLocationFetch = (url) => {type: 'COMPLETE_LOCATION_FETCH', url};

export …

我的样板redux-thunk文件与文档的顺序相反。我的样板createStore是参数，但文档createStore用作函数。我现在很困惑。我该如何store正确实施？

我需要使用 redux-thunk。但我的样板是这样的

import React, {Component} from 'react';
import './App.css';
import SelectTeam from "./components/select_teams";
import reducers from './reducers/index';
import {Provider} from 'react-redux';
import promise from "redux-promise";
import {applyMiddleware, createStore} from 'redux';
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom';
import LoginPage from './components/loginPage';

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
...
render() {
    return (
      <Provider store={createStoreWithMiddleware(reducers)}>
        <BrowserRouter>
       ....

这是官方文档

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

// …

刚发现我可以使用getState()将状态值传递给动作创建者.但是我注意到getState()返回所有组合状态而不是参数中指定的状态.我做错了什么,因为我不认为这是正确的行为？

减速器:

import { combineReducers } from "redux";
import { reducer as reduxForm } from "redux-form";
import authReducer from "./authReducer";

export default combineReducers({
  auth: authReducer,
  form: reduxForm
});

动作创建者片段:

export const handleProviderToken = token => async (dispatch, getState) => {
  let testState = getState("auth");
  console.log(testState); 
  const res = await axios.get(`${API_URL}/api/testEndpoint`);
  dispatch({ type: FETCH_USER, payload: res.data });
};

在执行console.log(testState)正显示出我的整个状态树上的对象(AUTH和形式,而不仅仅是AUTH).

由于 Redux 提供store将所有应用程序数据保存在一个地方，将数据保存在单个大文件中是一种好习惯object吗？如果我们有数千条记录并且它们的数据很大，那会不会影响应用程序的性能呢？

我发现这个问题很普遍，但是我没有找到解决方案。

我正在尝试使用react和redux与redux-thunk将用户重定向到react native中的另一个导航器。如果仅显示主屏幕，则工作正常，但是当我从登录屏幕重定向到主屏幕时，它陷入无限循环，我发现问题出在调度功能中。

import {
  FETCHING_CATEGORIES_REQUEST,
  FETCHING_CATEGORIES_SUCCESS,
  FETCHING_CATEGORIES_FAILURE,
} from "../types"

import { Categories } from "../../services/firebase"

export const fetchingCategoriesRequest = () => ({
  type: FETCHING_CATEGORIES_REQUEST,
})

export const fetchingCategoriesSuccess = data => ({
  type: FETCHING_CATEGORIES_SUCCESS,
  payload: data,
})

export const fetchingCategoriesFailure = error => ({
  type: FETCHING_CATEGORIES_FAILURE,
  payload: error,
})

export const fetchCategories = () => {
  return async dispatch => {
    dispatch(fetchingCategoriesRequest())
    Categories.get()
      .then(data => dispatch(fetchingCategoriesSuccess(data)))
      .catch(error => dispatch(fetchingCategoriesFailure(error)))
  }
}

路由

import { createSwitchNavigator } from "react-navigation" …

我正在学习 Redux，我对这里发生的事情感到非常困惑。我正在使用 thunk 并且 GET_ITEMS 在我的减速器中，所以我不确定我做错了什么？错误在dispatch(getItemsAction());

Redux.js

function reducer(state, action) {
    switch (action.type) {
        case 'GET_ITEMS':
            return {
                ...state,
                items: action.payload,
                loading: false,
            };
        case 'ADD_ITEM':
            return {
                ...state,
                items: [...state.items, action.payload],
            };
        case 'DELETE_ITEM':
            return {
                ...state,
                items: state.items.filter(item => item.id !== action.payload),
            };
        case 'ITEMS_LOADING':
            return {
                ...this.state,
                loading: true,
            };
        default:
            return state;
    }
}

export const getItemsAction = () => ({
    return(dispatch) {
        axios.get('api/items').then(response => {
            console.log(response);
            dispatch({ type: 'GET_ITEMS', payload: response.data });
        });
    }, …

我正在使用 react-router-dom v5.2。

登录后，我希望我的页面重定向到/homefrom /。登录表单位于/。

当我尝试在没有任何异步功能的情况下执行身份验证（即，将用户名和密码与 react 中的硬编码值进行比较）时，一切正常。

但是当我使用 express 和 mongo 执行身份验证时，登录时的重定向停止工作。如果我再次登录，则会发生重定向。受保护的路由仍然有效（如果用户未登录，则重定向到登录页面）。

这是我在 express + mongo ie 中使用 do auth 的问题的一个小演示。异步还原。这没有按预期工作。https://youtu.be/Zxm5GOYymZQ

这是我使用硬编码用户名和密码（均为“测试”）进行身份验证的应用程序链接。这里没有异步。这按预期工作。用户名和密码都是“test”。https://poke-zoo.herokuapp.com/

这是App.js：

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const authState = useSelector(selectorAuth)
  // const location = useLocation()
  return (
    <Route
      {...rest}
      render={props => {
        if (authState.isUserLoggedIn) {
          return <Component {...props} />
        } else {
          return (
            <Redirect
              to={{
                pathname: "/",
                state: {
                  from: props.location,
                }, …