Question

我正在使用此样板构建应用：https://github.com/werein/react

我正在使用需要密钥的API，因此我将通过Express（server.js）获取JSON并将其作为道具传递给我的组件。

如何将所有内容粘合在一起以将JSON作为道具？

我试图传递一些Dummy JSON

app.get('yourinfo', (req, res) => {
  res.json({ 'a': 'Some JSON' });
});

  <ConnectedRouter history={history}>
    <Layout>
      <Match exactly pattern="/yourinfo" component={App} />
    </Layout>
  </ConnectedRouter>

当我检查this.props时，我没有得到任何东西。

有什么想法吗？

Answer 1

请记住，在使用redux时，应用程序的状态存储在redux状态。所有对州的改变都是通过派遣的行动来完成的。

因此，要将API密钥保存在应用程序的状态中，只需创建一个操作＆amp;发货：

// the "save API key" action
export function saveAPIKey(key) {
  return {
    type: APP_APIKEY,
    key,
  };
}

// to use the loadAPIKey action, dispatch it
import store from './store/store';
import { saveAPIKey } from './path/to/actions';

fetch('/my/api/endpoint')
  .then((response) => response.json())
  .then((data) => store.dispatch(saveAPIKey(data.key)));

这是基本的想法，但有一种更简单的方法。如果您通读the redux docs on async actions，您将看到可以使用redux-thunk软件包创建一个异步行为的操作。它看起来有点复杂，但它的优点是可以将处理异步操作的所有代码放在一个地方，而不是在整个代码中传播fetch次调用。

如何将JSON传递给Redux - ＆gt;反应组件

1 个答案: