React Redux 调度

Question

调用 dispatch 以获取 React 组件的初始数据的最佳方式是什么。我的理解是在渲染之前调用了 ComponentWillMount。所以理论上，如果我在 ComponentWillMount 上调用 dispatch，当我点击渲染然后 ComponentDidMount 时，我应该将我的数据放在组件的 props 中，对吗？我没看到。

我看到 render 被调用了两次，并且在第一次初始化组件时，我无法访问 props 中的数据。在第二次渲染之前，似乎调度实际上并没有被调用。我基本上希望在最初设置组件时对调用调度的最佳方式有所了解。我实际上是在尝试执行以下操作，其中我使用容器组件从调度中获取数据，然后将其作为道具传递给子组件。但是我也想在ContainerComponent中初始化一些状态变量，然后将它们作为props传递给ChildComponent。问题是我要初始化的状态变量取决于从调度返回的数据，理想情况下我会在 ComponentWillMount 或 ComponentDidMount 中进行初始化。

import React from 'react';
import axios from 'axios';

import { connect } from 'react-redux';
import ChildComponent from './ChildComponent.js';

import { getTransactionsAll } from '../actions/actions.js';

class ContainerComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      acctList:[],
      acctChecked:[],
      categoryList:[]
    }
}
  componentWillMount() {

    console.log("componentWillMount entered");

    this.props.get_data();
    console.log(this.props.searchProps.transactions_all);//this is undefined meaning the dispatch has not assigned the data yet...??

  }

  componentDidMount() {
    console.log("componentDidMount entered");
    console.log(this.props.searchProps.transactions_all);//this is undefined meaning the dispatch has not assigned the data yet...??
}

  render() {

    console.log("TransactionManagerContainer render entered");
    console.log(this.props.searchProps.transactions_all);//this is undefined the first time around meaning the dispatch has not assigned the data yet...??, but is defined on the second call to render after the dispatch has actually occurred...

return <ChildComponent
             data={this.props.searchProps.data}/>;
}

const mapStateToProps = (state) => ({
  searchProps: state.searchProps
});

export default connect(mapStateToProps, {getTransactionsAll})(TransactionManagerContainer);

这是我分配状态的减速器：

import { combineReducers } from 'redux'

import {GET_TRANSACTIONS } from '../actions/actions.js'
import {GET_TRANSACTIONS_ALL } from '../actions/actions.js'

const INITIAL_STATE = { defaultYear: 2016, transactions: []};

function get_transactions(state = INITIAL_STATE, action) {
  // console.log("this is in the reducer: get_transactions");
  // console.log(action);
  switch(action.type) {
    case GET_TRANSACTIONS:
      // return { ...state, transactions: action.payload };
      return Object.assign({}, state, {
        transactions: action.payload,
        selectedYear: action.selectedYear
      })
    default:
      return state;
  }
}

function get_transactions_all(state = INITIAL_STATE, action) {
  console.log("this is the value of action in the reducer: get_transactions_all");
  console.log(action);
  switch(action.type) {
    case GET_TRANSACTIONS_ALL:
      // return { ...state, transactions: action.payload };
      return Object.assign({}, state, {
        transactions_all: action.payload
      })
      console.log("this is the value of state in the reducer after being set");
      console.log(state);
    default:
      return state;
  }
}

const rootReducer = combineReducers({
  //stateProps: get_transactions,
  searchProps: get_transactions_all
})

export default rootReducer

这是我的行动：

import axios from 'axios';

export const GET_TRANSACTIONS = 'GET_TRANSACTIONS';

export function getTransactions(year) {
 return function(dispatch) {
  axios.get(`http://localhost:3001/api/transfilter?year=${year}&grouping=2`)
   .then(response => {
     dispatch({
       type: GET_TRANSACTIONS,
       payload: response.data,
       selectedYear: year
     });
   })
   .catch((error) => {
     console.log(error);
   })
 }
}

export const GET_TRANSACTIONS_ALL = 'GET_TRANSACTIONS_ALL';

export function getTransactionsAll(year) {
 return function(dispatch) {
  axios.get(`http://localhost:3001/api/trans?limit=20`)
   .then(response => {

     dispatch({
       type: GET_TRANSACTIONS_ALL,
       payload: response.data
     });
   })
   .catch((error) => {
     console.log(error);
   })
 }
}

Answer 1

我相信您的主要问题是：

调用调度以获取 React 组件的初始数据的最佳方法是什么？

获取初始数据请求（或一般的任何 AJAX 请求）应在 componentDidMount 生命周期事件中进行。

这有几个原因，这里有两个重要的：

1. Fiber 是 React 协调算法的下一个实现，它将能够根据需要启动和停止渲染以提高性能。这样做的一个权衡是 componentWillMount，另一个可能对发出 AJAX 请求有意义的生命周期事件，将是“不确定的”。这意味着 React 可能会在需要时在不同时间开始调用 componentWillMount。对于 AJAX 请求，这显然是一个糟糕的公式。

2. 您不能保证 AJAX 请求在组件挂载之前不会被解析。如果是这样，那意味着您将尝试在未安装的组件上设置状态，这不仅不起作用，而且 React 会为您大喊大叫。在 componentDidMount 中做 AJAX 会保证有组件要更新。

致谢：从here了解到，还有here的讨论。

然后，你提出了很多小问题，我很难回答所有问题，但我会尽量涵盖大部分：

• 看完以上内容，你现在应该明白为什么componentWillMount和componentDidMount中的数据是undefined了。那只是因为数据还没有到；
• 在第一次渲染组件时，您的数据为undefined 是正常的。初始渲染发生在数据到达之前；
• 在第二次渲染期间定义数据是正常的。 dispatch 触发异步数据获取。在数据到来之后，reducer 被命中并且组件被重新渲染（这是第二次重新渲染）。

• 如果您的主组件中的子组件需要数据 - 检查父 render 方法如果数据存在，则有条件地传递内部组件，仅当数据存在时。像这样：

  class ContainerComponent extends React.Component {
    // ... omitted for brevity
  
    render() {
      return (
        { this.props.searchProps.data ?
            <ChildComponent
              data={this.props.searchProps.data} />
            : <p>Loading</p>
        }
      );
    }
  }