如何将动作创建者（使用分派）传递给 store.dispatch？

Question

我在 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 中调用此操作创建器，因为我想在应用程序呈现后立即加载保存在本地存储中的用户详细信息。

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() 函数的 return 内部没有执行任何操作。甚至 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;

Answer 1

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

store.dispatch(loadUser());

如何将动作创建者（使用分派）传递给 store.dispatch？

How to pass action creator (that uses dispatch) to store.dispatch?

dispatch

reactjs

redux