如何从文件/ api 加载数据以进行第一次渲染和从状态加载以进行反应，redux 中的后续渲染？

Question

我对 react 和 redux 很陌生。我在 componentWillMount() 中加载了一个本地 json 文件，一个联系人列表。我也在将数据从文件复制到状态（在减速器中）。

但我正在执行一些操作，例如使用状态中加载的数据添加、删除和更新联系人。

我的问题是在第一次渲染后我希望从状态而不是从本地文件加载数据。我知道 componentWillMount 会从文件中加载数据，而不是从每次渲染的状态中加载。

我尝试使用不同的反应生命周期但失败了？ 有办法吗？

简而言之，我希望从文件中加载数据以进行第一次渲染，并从状态中加载数据以进行后续渲染

export class ContactsIndex extends Component {
  componentWillMount() {
        this.props.fetchInitialContacts();
  }
  render() {........}
 }



export function fetchInitialContacts() {
 const request = axios.get(ROOT_URL);
  return (dispatch) => {
    request.then(({data}) => {
        dispatch({  type: 'GET_INITIAL_CONTACTS', contactsListPayload:data })
    });
}
}

Answer 1

在 react-redux 应用程序生命周期中，您正在使用通常名为 mapStateToProps 的函数连接组件类。此函数负责将属性传递给您的反应组件。然后，您不再需要在组件的状态下处理您的响应。

为了实现这一点，您必须将代码扩展为以下内容：

export class ContactsIndex extends Component {
  render() {
    // access your contacts like this
    return <div>
      { this.props.contacts }
      </div>;
  }
}

function mapStateToProps(state) {
  return {
    contacts: state.contacts
  }
}

export default connect(mapStateToProps)(ContactsIndex)

然后在您的应用初始化或 componentWillReceiveProps 中的某个位置，您可以调度您的 GET_INITIAL_CONTACTS 操作：

componentWillReceiveProps(nextProps) {
  // if contacts are unset, call the action and load them:
  if (nextProps.contacts === null) {
     this.props.dispatch(fetchInitialContactsAction());
  }
}

在您的 reducer 中，您将联系人映射到全局状态索引“contacts”，然后它会自动作为 this.props.contacts 从您的组件中使用，因为它是由 mapStateToProps 传递给它的。

这是你的减速器的一个例子：

initialState = { contacts: null }; // initialstate for contacts has to be null in order to work
function contacts(state = initialState, action) {
  switch (action.type) {
    case GET_INITIAL_CONTACTS:
      return Object.assign({}, state, {
        contacts: action.data // data should hold your contacts
      });
    default:
      return state;
  }
}

您可以在 redux 文档中了解更多信息：https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

在此处了解减速器http://redux.js.org/docs/basics/Reducers.html