无法从 Redux Thunk 获取同步数据



actioncreator

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);

应用.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((它调用动作创建者this.props.pickup(false((我也签入redux-devtools它显示值(然后我正在安慰Pick State(存储在componentWillReceiveProps(nextprops)中(,所以它显示默认值而不是false
但是当我安慰里面的值时setTimeout(() =>{console.log('sdkjlfjlksd',this.state.pick) }, 3000);它显示false如果我
错了,请纠正我 我知道redux-thunks 以同步方式而不是异步方式工作所以在这里为什么它不能以同步方式工作我
卡住了,请任何人帮助我!
更新
我刚刚得到了 prblm 的位置,实际上是在componentWillReceiveProps中,我正在设置选择状态值,因为它是异步的,所以当我在isPickEmpty函数中获取值时,我得到了 prev 值。
如何处理设置状态或有什么方法可以解决

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

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

如果您满足此mapStateToProps,应该可以很好地工作

最新更新