立即由操作创建者获得返回状态
立即由操作创建者获得返回状态
提问于 2017-09-19 09:05:42
如何在分派行动后立即获得状态的值？如果状态，它将像setState中的箭头函数一样简单，如下所示：
this.setState({ test: true }, () => {
console.log("hey im loggin!!"
})但是如果使用了动作创建者呢?例如，我的连接函数中有这样的内容：
export default connect({mapStateToProps, { loginUser }})(Home);怎么才能这样做？
this.props.loginUser(, () => {
console.log("of course this code does not work")
});.then()不工作。
目前，我正在使用一个函数，并立即注入到组件中，这是我觉得不适合做的事情。就像这样：
test() {
this.props.loginUser(email, password);
console.log(this.props.user)
}在我的那部分
return (<div>{this.test()}</div>)编辑:我的动作和减速器
import axios from 'axios';
import { LOGIN, LOGIN_SUCCESS, LOGIN_ERROR } from './types';
const API_URL = 'http://localhost:8000/';
export const loginUser = (email, password) => {
return (dispatch) => {
dispatch({ type: LOGIN })
axios.post(`${API_URL}v1/login`, { email, password })
.then( user => {
dispatch({
type: LOGIN_SUCCESS,
payload: user.data.user })
})
.catch( error => {
dispatch({ type: LOGIN_ERROR, payload: error })
})
};
};还原剂：
import { LOGIN, LOGIN_SUCCESS, LOGIN_ERROR } from '../actions/types';
const INITIAL_STATE = {
loading: false,
user: [],
message: '',
error: false,
};
export default (state = INITIAL_STATE, action) => {
switch(action.type) {
case LOGIN:
return { ...state, loading: true }
case LOGIN_SUCCESS:
return { ...state, loading: false, user: action.payload, error: false, message: '' }
case LOGIN_ERROR:
return { ...state, loading: false, error: true, message: action.payload }
default:
return state
}
};应用程序js
<Provider store={createStore(store, {}, applyMiddleware(thunk))}>
<Router>
<div>
<Route exact path="/" component={LoginForm} />
<Route path="/home" component={Home} />
<Route path="/profile" component={Profile} />
</div>
</Router>
</Provider>回答 2
Stack Overflow用户
回答已采纳
发布于 2017-09-19 09:09:31
我相信这些行动会回报你的承诺，所以你可以这样做：
this.props.fetchUser().then(() => {
console.log("do something")
});请注意，您需要在操作中返回承诺/分派。
return axios.post(`${API_URL}v1/login`, { email, password })
.then( user => {
return dispatch({
type: LOGIN_SUCCESS,
payload: user.data.user })
})
.catch( error => {
return dispatch({ type: LOGIN_ERROR, payload: error })
})Stack Overflow用户
发布于 2017-09-19 09:14:29
以下步骤可能对你有帮助-
- 在这里，您需要从操作创建者中分派异步操作。
- 用“redux-thunk”或"redux-saga“来表示。
- 您可以访问状态并创建一些异步操作。
使用redux-thunk
import { Provider } from 'react-redux';
import { createStore,combineReducers, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import reducers from './reducers';
let reducer = combineReducers(reducers)
// applyMiddleware supercharges createStore with middleware:
const createStoreWithMiddleware = createStore(reducer, applyMiddleware(thunkMiddleware))
ReactDOM.render(
<Provider store={createStoreWithMiddleware}>
<App />
</Provider>,
document.getElementById('root')
);举个例子-
export function fetchUser(userId) {
return dispatch => {
return Api.fetchUser(userId)
.then( res => {
dispatch(updateUserDetail(res));
});
};
}Api.fetchUser是对axios调用的抽象，以获取用户详细信息。
export function updateUserDetail(userRes) {
return {
type : UPDATE_USER_DETAILS,
userRes
};
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46296221
复制相关文章
相似问题
腾讯云开发者
