【问题标题】:not getting synchronous data from redux thunk没有从 redux thunk 获取同步数据
【发布时间】:2018-11-09 21:54:34
【问题描述】:

动作创建者

export function pickup(latlng) {

    return function(dispatch) {
        dispatch({ type: PICKUP_STATE,payload:latlng });
    };

}

减速器

import {
    PICKUP_STATE,
    PICKUP_ADD,
    DROPOFF_STATE
} from '../actions/types';

export default  (state={},action) => {
    const INITIAL_STATE = {
        pickup: '',
        pickupAdd:''
    };
    switch(action.type) {
        case PICKUP_STATE:
            console.log(action.payload)
            return {...state,pickup:action.payload};
        case PICKUP_ADD:
            return{...state,pickupAdd:action.payload};
        case DROPOFF_STATE:
            return {...state,dropoff:action.payload}
        default:
            return state;
    }
    //return state;
}

地图组件

import {
    connect
} from "react-redux";
import * as actions from "../actions"
class Map extends React.Component {
      componentWillReceiveProps(nextprops) {
             if (nextprops.pickupProps !== undefined) {
                 this.setState({
                     pick: nextprops.pickupProps
                 }, () => {
                     console.log(this.state.pick);

                 });
             }
       }
   isPickEmpty(emptyPickState) {
        this.props.pickup(emptyPickState);
    // setTimeout(() =>{ console.log('sdkjlfjlksd',this.state.pick) 
                        },3000);
        console.log(this.state.pick);
   }
}
const mapStateToProps = (state) => {
    // console.log(state.BookingData.pickup);
    return {
        pickupProps:state.BookingData.pickup,
        pickupAddProps: state.BookingData.pickupAdd
        }
}
export default connect(mapStateToProps,actions)(Map);

app.js 根文件

import React        from "react";
import ReactDOM     from "react-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import "normalize.css/normalize.css"
import  "./styles/styles.scss";
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import reduxThunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

import AppRouter from './routers/AppRouter';
import reducers from './reducers';
import {AUTH_USER} from "./actions/types";


const middleware = [
    reduxThunk,
];

const store = createStore(reducers, composeWithDevTools(
    applyMiddleware(...middleware),
// other store enhancers if any
));



const token = localStorage.getItem('token');
if(token){
    store.dispatch({type:AUTH_USER});
}

ReactDOM.render(
    <Provider store={store}>
        <AppRouter />
    </Provider>
    , document.getElementById('app'));

我的问题是当我从我的地图组件中调用 isPickEmpty() 它调用 action 创建者 this.props.pickup(false) (我还检查了 redux-devtools 它显示 false 值)然后我consoling pick state(存储在 componentWillReceiveProps(nextprops))所以它显示 default value 而不是 false
但是当我安慰里面的值setTimeout(() =&gt;{console.log('sdkjlfjlksd',this.state.pick) }, 3000); 它显示 false
如果我错了,请纠正我我知道 redux-thunks 以同步方式而不是异步方式工作所以这里为什么它不能以同步方式工作
我卡住了,请任何人帮助我!
更新
我刚刚得到了 prblm 的位置,实际上是在 componentWillReceiveProps 中,我正在设置选择状态值,因为它是异步的,所以当我在 isPickEmpty 函数中获取值时,我是获取 prev 值。
如何处理 setState 或有什么办法解决

【问题讨论】:

    标签: reactjs react-redux redux-thunk reducers redux-actions


    【解决方案1】:

    在组件中使用BookingData 中的值,但在reducer 上直接将其添加到状态中。

    const mapStateToProps = (state) => {
        console.log(state);//Check the state here
        return {
            pickupProps:state.pickup,
            pickupAddProps: state.pickupAdd
            }
    }
    

    如果你看到这个mapStateToProps应该会很好

    【讨论】:

    • 不,实际上我创建了一个 index 减速器文件,我将这个文件添加为 BookingData。 prblm 不是因为我异步获取数据,但我想要 redux thunk 中的同步数据。您可以在 setIntervel 之后的 isPickEmpty 中看到我正在获取数据。
    猜你喜欢
    • 2018-04-12
    • 2018-11-10
    • 2019-02-03
    • 2020-10-28
    • 1970-01-01
    • 2021-06-15
    • 2017-09-26
    • 2019-03-15
    • 1970-01-01
    相关资源
    最近更新 更多