Question

我是React + Redux的初学者。

我在两者上都做了course并尝试扩展我在课程中创建的应用。

当然，Cory提到在加载应用时加载初始数据。所以在我们的应用程序入口点index.js中，我们做了类似

的操作

const store = configureStore();
store.dispatch(loadCourses());
store.dispatch(loadAuthors());
store.dispatch(loadTransactions());

render(
  <Provider store={store}>
    <Router history={browserHistory} routes={routes}/>
  </Provider>,
  document.getElementById('app')
);

我看到的挑战是，即使我们可能无法加载特定页面（例如API，但仍然调用/transactions），我们也会调用loadTransactions()。

当我们点击route也称加载Component时，我们只加载数据的一些方法是什么？

例如，当我点击loadTransactions()时，我只会调用store（并在/transactions中保存数据）。

由于

更新
我尝试按照建议解决并得到以下内容，我想验证这种方法是否正确。请让我知道

class TransactionsPage extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  componentDidMount() {
    console.log("component mounted");
    this.props.fetchTransactions;
  }

  render() {
    return (
      <div>
        <h1>Transactions</h1>
        <TransactionList transactions={this.props.transactions}/>
      </div>
    );
  }
}

TransactionsPage.propTypes = {
  transactions: PropTypes.array.isRequired
};

function mapStateToProps(state, ownProps) {
  return {
    transactions: state.transactions
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(transactionActions, dispatch),
    fetchTransactions: dispatch(loadTransactions())
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(TransactionsPage);

但有了这个，我得到Warning为

warning.js?8a56:36 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

Answer 1

我使用onEnter并对此非常满意：

const sessionEnter = (location) => {
    let {sessionId} = location.params;
    store.dispatch(appActions.loadApp(sessionId, 'APP'))
    store.dispatch(appActions.getComboDetailsBySessionId(sessionId, 'APP'))
    setFirebaseAppListeners();
}

const routeConfig = [   
    {path: '/session/:sessionId', component: App, onEnter: sessionEnter},
    {path: '/signup', component: Signup},
    ...
];

const renderStore = () => {
    rootElement = document.getElementById('root')

    render(
        <MuiThemeProvider>
            <div className="root">
                <Provider store={store}>
                    <Router history={history} routes={routeConfig}/>
                </Provider>
            </div>
        </MuiThemeProvider>,

        rootElement
    );
}</MuiThemeProvider>,

    rootElement
);
}

当API调用与路由参数相关时，我更喜欢 componentDidMount 方法。这样就可以在安装组件之前进行API调用，从而增加组件安装时数据准备的可能性。

另一方面，如果我的Weather组件只需要来自天气API的状态（应用程序中其他任何地方都不存在），我会从 componentDidMount 触发API调用

<强>更新

如果您修复了一些语法故障，您的代码将起作用。可以在此处找到工作示例：http://jsbin.com/sixofu/edit?js,output

Answer 2

将数据加载到组件中的componentWillMount生命周期钩子中。

此生命周期挂钩将在组件呈现之前执行。您可以在此处阅读更多内容：https://facebook.github.io/react/docs/component-specs.html

希望这有帮助。

单击路由器时调用API

2 个答案: