有没有办法在 Component Mount 上调度一个动作？答案

【问题标题】：Is there a way to dispatch an action on Component Mount?有没有办法在 Component Mount 上调度一个动作？
【发布时间】：2020-04-07 19:39:57
【问题描述】：

我正在使用 Firebase 进行用户身份验证，并且我想使用 onAuthStateChanged() 使用户即使在刷新浏览器后仍然存在。我也在使用 redux-sagas 来处理异步操作。

Index.jsx 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import './App.scss';
import store from './store';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
serviceWorker.unregister();

App.jsx：

import React, { Component } from 'react';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import Navbar from './components/navbar';
import routes from './routes';
import { actionTypes } from './components/signin/actionTypes';

const { VERIFY_REQUEST } = actionTypes;

const mapDispatchToProps = {
    VERIFY_REQUEST,
};

class App extends Component {

    render() {
        return (
            <Router>
                <Navbar />
                <Switch>
                    {routes.map(route => (
                        <Route
                            key={route.path}
                            path={route.path}
                            exact={route.exact}
                            component={route.component}
                        />
                    ))}
                </Switch>
            </Router>
        );
    }
}

export default connect(null, mapDispatchToProps)(App);

我的 sagas 生成器函数绑定到动作类型：

function onAuthState() {
    return new Promise((resolve, reject) => {
        loginToFirebase.auth().onAuthStateChanged(user => {
            if (user) {
                console.log(user);
                resolve(user);
            } else {
                reject(new Error('Ops!'));
            }
        });
    });
}

function* verifyUserAuth() {
    try {
        const LOGIN_API_URL = process.env.REACT_APP_USER_AUTH_API;
        const { user } = yield onAuthState();
        console.log(user);
        const userInfo = { userAuth: user, userType: 'user' };
        const config = { headers: { 'Content-Type': 'application/json' } };
        const body = JSON.stringify(userInfo);
        const response = yield axios.post(LOGIN_API_URL, body, config);
        if (response.status === 200) {
            const { data: { info } } = response.data;
            yield put({ payload: info, type: VERIFY_SUCCESS });
        } else yield put(loginError(response.status));
    } catch (error) {
        yield put(loginError(error));
    }
}

export default function* watchUserLoginAction() {
    yield takeEvery(VERIFY_REQUEST, verifyUserAuth);
}

每次我检查我的 redux 工具时，我都没有看到在组件挂载时触发的操作。

【问题讨论】：

您是否尝试过使用componentDidMount()？它在组件安装后立即调用（插入到树中）。需要 DOM 节点的初始化应该放在这里。如果您需要从远程端点加载数据，这是一个实例化网络请求的好地方。

标签： reactjs redux react-redux firebase-authentication redux-saga

【解决方案1】：

您可以使用componentDidMount 生命周期方法，只要您想在在组件安装后执行某些操作。修改你的mapDispatchToProps

const mapDispatchToProps = dispatch => {
         return {
            verifyRequest: () => { dispatch( {type : VERIFY_REQUEST} ) }
          };
    };

然后从componentDidMount调用verifyRequest

componentDidMount = () =>{
     this.props.verifyRequest()
}

另外，最好创建动作创建者，而不是像这样直接调度动作

export const verifyRequestAction = () => {
    return {
        type: VERIFY_REQUEST
    }
}

然后

const mapDispatchToProps = dispatch => {
         return {
            verifyRequest: () => { dispatch(verifyRequestAction()}
          };
    };

【讨论】：