Question

我想知道如何使用状态值（如用户ID）作为参数正确加载无状态组件的数据。目前我尝试在onEnter函数中加载数据，但我似乎无法在该阶段访问状态。

是否适合在onEnter中加载数据，或者是否希望在其他地方或以不同的方式完成数据以便能够访问该状态？

有关当前设置的更多详细信息

项目正在使用react-router v2，不同的部分被分成不同的目录，如下所示：

/index.js
/actions/
/components
/containers
/reducers

index.js正在创建保存状态的商店。

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import {reactWeb} from './reducers';
import AppContainer from './containers/AppContainer';

import './css/index.css';

let middlewares = [thunk, promiseMiddleware()];    
let store = createStore(reactWeb, applyMiddleware(...middlewares));

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

在AppContainer中，使用onEnter加载当前用户的数据，并将数据存储为user状态。回调用于在继续之前等待响应。在onEnterTodos我需要从州获取当前用户的id作为参数。我不知道如何访问那里的州。

import {connect} from 'react-redux';
import App from '../components/App';
import {init} from '../actions';
import {getCurrentUser} from '../actions/profile';
import {getTodos} from '../actions/todos';

const mapStateToProps = (state) => {
    return {
        isLoggedIn: state.loggedIn,
        redirectUrl: state.redirectUrl,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        onEnterApp: (nextState, replace, callback) => {
            // Get user data
            dispatch(getCurrentUser(nextState, callback));
            callback();
        },
        onEnterTodos: (nextState, replace) => {
            // Get todos of the user - how to get the userid
            dispatch(getTodos(795558));
        }
    };
};

const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App);

export default AppContainer;

有些人声称路由应该从将存储作为参数的函数返回，然后可以将存储作为参数传递给onEnter函数。这意味着将路由设置移动到index.js，对我来说问题是调度功能不可用。

以下是与容器关联的组件：

import React from 'react';
import StartContainer from '../containers/StartContainer';
import TodosContainer from '../containers/TodosContainer';

import {Router, Route, browserHistory, IndexRoute, IndexRedirect} from 'react-router';

const App = ({onEnterApp, onEnterTodos}) => {
    let routes = (
        <Route path="/" onEnter={onEnterApp}>
            <IndexRedirect to="start"/>
            <Route path="start" component={StartContainer}/>
            <Route path="todos" onEnter={onEnterTodos} component={TodosContainer}/>
        </Route>
    );

    return (
        <div>
            <Router history={browserHistory} routes={routes}/>
        </div>
    )
};

App.propTypes = {};

export default App;

Answer 1

为了解决这个问题，我将这些请求链接起来。因此，onEnter函数无法直接访问状态，但在这种情况下，我可以依赖API。

在AppContainer中更改了以下onEnter函数：

onEnterUsers: (nextState, replace) => {
    dispatch(getEmployees());
}

然后创建了两个新动作。第一个，获取有关当前用户的信息，现在只返回一个承诺。

export const getCurrentUserPromise = (nextState, callback) => {

    let headers = {
        'Accept': 'application/json'
    };
    return apiCall('get', config.apiEndPoint + 'login/currentLogin', null, headers);

};

最后，为了获得待办事项，我使用了getCurrentUserPromise并链接了待办事项的请求。

export const getEmployees = () => {
    let headers = {
        'Accept': 'application/json'
    };
    return dispatch => {
        const payloadUser = getCurrentUserPromise()
            .then(res => {
                const payload = apiCall('get', config.apiEndPoint + 'todos/find?userid=' + res.userid, null, headers)
                    .then(res => {
                        return res;
                    });
                dispatch({type: 'GET_TODOS', payload});
                return res;
            });
        return dispatch({type: 'GET_CURRENT_USER', payloadUser});
    };
};

在无状态反应组件

1 个答案: