如何将动作创建者（使用调度）传递给 store.dispatch？答案

【问题标题】：How to pass action creator (that uses dispatch) to store.dispatch?如何将动作创建者（使用调度）传递给 store.dispatch？
【发布时间】：2021-07-28 14:13:27
【问题描述】：

我在 authActions.js 中有一个动作创建者

export const loadUser = () => {
  console.log('loadUser running');
  return(dispatch, getState) => {
    //User loading
    console.log('about to call api');
    dispatch({type: USER_LOADING});

    console.log('dispatched user loading');
    return axios.get('api/auth/user', setConfig(getState)).then(res => {console.log(res.data); dispatch({type: USER_LOADED, payload: res.data});})
                                                            .catch(err => {
                                                                dispatch(returnErrors(err.response.data, err.response.status));
                                                                dispatch({type: AUTH_ERROR})
                                                            });
}

}

我在 App.js 中调用此操作创建者，因为我想在 App 呈现后立即加载保存在本地存储中的用户详细信息。

function App() {
  useEffect(() => {
    console.log('loading user');
    store.dispatch(loadUser);
  }, []);
 return (
  <Provider store={store}>
   <div className="App">
    <AppNavbar />
    <ShoppingList />
   </div>
  </Provider>
 );
}

export default App;

但是在 loadUser() 函数的返回内部没有执行任何操作。甚至那个 console.log('about to call api') 都没有工作。我怎样才能让它工作？

authReducer.js 的内容是：

const initialState = {
 token: localStorage.getItem('token'),
 isAuthenticated: null,
 isLoading: false,
 user: null
};

const authReducer = (state = initialState, action) => {
 switch(action.type){
    case USER_LOADING:
        return {
            ...state,
            isLoading: true
        };
    case USER_LOADED:
        return {
            ...state,
            isAuthenticated: true,
            isLoading: false,
            user: action.payload
        };
    case AUTH_ERROR:
        localStorage.removeItem('token');
        return {
            ...state,
            token: null,
            user: null,
            isAuthenticated: false,
            isLoading: false
        };
    default:
        return state;
   }
  };

  export default authReducer;

【问题讨论】：

标签： reactjs redux dispatch

【解决方案1】：

您必须调用 loadUser 操作，这在您的情况下是一个 thunk（函数）。我假设你已经添加了 redux-thunk 中间件，对吧？

store.dispatch(loadUser());

【讨论】：