Javascript 立即通过操作创建者获取返回的状态

如何在发出操作后立即获取状态值？如果是state，它将像setState中的箭头函数一样简单，如：

this.setState({ test: true }, () => {
console.log("hey im loggin!!"
})

但是如果使用了action creator会怎么样：例如，我的connect函数中有：

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 { 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>

---

我相信这些行动会回报承诺，所以你可以像这样做：

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

---

以下步骤可能会对您有所帮助-

在这里，您需要从动作创建者处调度异步动作

用“重演”或“重演传奇”来表达

您可以访问该状态并创建一些异步操作

使用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')
);

Api.fetchUser

是对axios调用的抽象，用于获取用户详细信息

export function updateUserDetail(userRes) {
    return {
        type : UPDATE_USER_DETAILS,
        userRes
    };
}

---

您是否在“fetchUser”调用期间进行ajax调用？是的，使用Axiosa您是否使用thunk Middleware您是否可以共享

fetchUser

函数源代码？由于您的组件已连接到redux store，您应该在获取用户数据准备就绪时发送操作并更新redux状态。您好，你试过在你的行动中使用return语句吗？我已经挠头两天了，只是为了一个

return

太好了，很高兴它能帮上忙

export function fetchUser(userId) {
    return dispatch => {
        return Api.fetchUser(userId)
            .then( res => {
                dispatch(updateUserDetail(res));
            });
    };
}

export function updateUserDetail(userRes) {
    return {
        type : UPDATE_USER_DETAILS,
        userRes
    };
}