页面加载时从Redux操作获取状态

Question

我正在开发一个需要Twitch OAuth的应用程序。我有身份验证方面的工作。

现在，当我在身份验证后导航到主页时，我需要它来获取用户的信息。例如，电子邮件、显示名称、用户id等，然后在页面上显示其中的一些。

Home.tsx:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';
import styles from './Home.css';
import routes from '../constants/routes.json';
import { fetchUser, user } from '../features/home/homeSlice';
export default function Home() {
const dispatch = useDispatch();
const User = useSelector(user);
return <div>You are logged in as {User.display_name}! <button onClick={() => dispatch(fetchUser())}>Load</button></div>;
}

(目前我能让它工作的唯一方法是点击按钮，这很有效(

homeSplice.ts:

import { createSlice } from '@reduxjs/toolkit';
import { RootState, AppThunk } from '../../store';
import axios from 'axios';
import Config from '../../lib/Config';
const config = new Config();
const accessToken = config.getAccessToken();
const homeSlice = createSlice({
name: 'home',
initialState: {
user: {
id: 0,
login: null,
display_name: null,
type: null,
broadcaster_type: null,
description: null,
profile_image_url: null,
offline_image_url: null,
view_count: 0,
email: null
}
},
reducers: {
userSuccess: (state, action) => {
state.user = action.payload;
},
},
});
export const { userSuccess } = homeSlice.actions;
export const fetchUser = (): AppThunk => {
return (dispatch) => {
axios
.get('https://id.twitch.tv/oauth2/validate', {
headers: {
Authorization: `OAuth ${accessToken}`,
},
})
.then((response) => {
const client = response.data;
axios
.get(`https://api.twitch.tv/helix/users?id=${client.user_id}`, {
headers: {
Authorization: `Bearer ${accessToken}`,
'Client-ID': client.client_id,
},
})
.then((response) => {
const user = response.data.data[0];
dispatch(userSuccess(user));
});
});
};
};
export default homeSlice.reducer;
export const user = (state: RootState) => state.home.user;

这一切都很好，但只有当我点击"；加载"；按钮我不想要这个。我需要我的页面在页面加载时以某种方式执行fetchUser()。我曾尝试将其转换为React组件，并通过我在网上找到的信息通过componentDidMount()进行操作，但大多数都告诉你调用this.props.fetchUser()，这对我来说不起作用，因为操作不会出现在this.props下。

Answer 1

这取决于您使用的组件类型。如果您使用的是功能组件，请检查useState和useEffect。如果您使用类组件并将fetchUser声明为类方法，那么this.props.fetchUser当然不会工作，因为this.props是从父级传递的状态。如果在类组件外部声明，只需调用this.etchUser或fetchUser。