React-Redux：如何使用异步调用中的数据填充加载时的组件的prop？

Question

我有这个自动完成组件，它需要一个术语数组作为dataSource属性。 我要输入的数据驻留在公共API中，我已经按照此处的教程操作，以获取以下代码。 但是本教程（以及其他许多教程）介绍了如何将这些动作绑定到事件，而我想用页面加载数据填充此道具。 我将如何去做？

actions.js

import fetch from 'isomorphic-fetch';

export function loadSchools(termId) {
  return {
    type: 'LOAD_SCHOOLS',
    termId
  };
}

export function receiveSchools(termId, json) {
  return {
    type: 'RECEIVE_SCHOOLS',
    termId,
    schools: json.data.children.map(child => child.data), // ???
    receivedAt: Date.now()
  };
}

export function getSchools(termId) {
  return function (dispatch) {
    dispatch(loadSchools(termId));
    return fetch('http://www.northwestern.edu/class-descriptions/4650/index-v2.json')
      .then(response => {
        if (response.status >= 400) {
          throw new Error('Bad response from server');
        }
        return response.json();
      })
      .then(data => dispatch(receiveSchools(termId, data)));
  };
}

reducers.js

const initialState = {
  schoolsData: {
    isFetching: false,
    lastUpdated: 0,
    schools: []
  }
};

function schools(state = initialState, action) {
  switch (action.type) {
    case 'LOAD_SCHOOLS':
      return {
        ...state,
        isFetching: true
      };
    case 'RECEIVE_SCHOOLS':
      return {
        ...state,
        isFetching: false,
        schools: action.schools,
        lastUpdated: receivedAt
      }
    default:
      return state;
  }
}

export default schools;

Search.jsx

import React from 'react';
import AutoComplete from 'material-ui/AutoComplete';

export default class Search extends React.Component {
  render() {
    return (
        <AutoComplete
          hintText="Search for something."
          dataSource={this.props.searchdata}
          maxSearchResults={15}
          filter={AutoComplete.caseInsensitiveFilter}
          onNewRequest={}
        />
    );
  }
}

Search.propTypes = {
  searchdata: React.PropTypes.array.isRequired,
  onSelect: React.PropTypes.func
};

index.jsx

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { grey500, white, fullBlack } from 'material-ui/styles/colors';
import { fade } from 'material-ui/utils/colorManipulator';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import schools from './reducers/reducers';
import colors from './colors';
import NavBar from './components/NavBar.jsx';
import Serif from './components/Serif.jsx';

const store = createStore(schools, applyMiddleware(thunkMiddleware));

const muiTheme = getMuiTheme({
  palette: {
    primary1Color: colors.northwesternPurple,
    primary2Color: colors.northwesternPurple120,
    primary3Color: grey500,
    accent1Color: colors.northwesternPurple30,
    accent2Color: colors.richBlack10,
    accent3Color: colors.richBlack50,
    textColor: colors.richBlack80,
    alternateTextColor: white,
    canvasColor: white,
    borderColor: colors.richBlack20,
    disabledColor: fade(colors.richBlack80, 0.3),
    pickerHeaderColor: colors.northwesternPurple,
    clockCircleColor: fade(colors.richBlack80, 0.07),
    shadowColor: fullBlack
  }
});

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <MuiThemeProvider muiTheme={muiTheme}>
          <div> {/* MuiThemeProvider requires stricly one child element */}
            <NavBar />
            <Serif /> {/* This component contains SearchContainer, which in turn contains Search */}
          </div>
        </MuiThemeProvider>
      </Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

Answer 1

您可以从另一个组件渲染Search组件，我们称其为SearchContainer 。 SearchContainer由react-redux的connect函数装饰，该函数仅具有分派动作以获取学校的作用。 在获取学校之前， SearchContainer不会呈现搜索组件。

这是代码示例的示例。 在这里，我假设您不使用react-redux 。

首先，您在reducers.js的初始状态中有一个小问题。 它应该是：

const initialState = {
  isFetching: false,
  lastUpdated: 0,
  schools: []
};

function schools(state = initialState, action) {
  switch (action.type) {
    case 'LOAD_SCHOOLS':
      return {
        ...state,
        isFetching: true
      };
    case 'RECEIVE_SCHOOLS':
      return {
        ...state,
        isFetching: false,
        schools: action.schools,
        lastUpdated: receivedAt
      }
    default:
      return state;
  }
}

SearchContainer.js

// ./containers/SearchContainer.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { loadSchools } from '../actions/actions'
import Search from '../components/Search';

class SearchContainer extends Component { 
  componentDidMount() {
    this.props.loadSchools(this.props.termId);
  },
  render() {
    const { 
      schools, 
      isFetching
    } = this.props;
    if (isFetching) {
      return null;
    }
    return <Search schools={schools} />;
  }
}

const mapStateToProps = (state) => ({
  isFetching: state.isFetching,
  schools: state.schools
});

const mapActionsToProps = (dispatch) => ({
  loadSchools: (termId) => dispatch(loadSchools(termId)),
});

export default connect(mapStateToProps, mapActionsToProps)(SearchContainer);

这样，在第一次渲染时，不会渲染您的Search组件。 仅在加载学校之后才渲染它。

Answer 2

您可以从componentDidMount生命周期方法（可能在您的Serif组件中，但我看不到该代码）中调度LOAD_SCHOOLS操作。

从文档：

挂载组件后立即调用componentDidMount（） 。 需要DOM节点的初始化应在此处进行。 如果您需要从远程端点加载数据，那么这是实例化网络请求的好地方 。 在此方法中设置状态将触发重新渲染。

https://facebook.github.io/react/docs/react-component.html#componentdidmount