问redux中间件如何将数据添加到存储区？
EN

Stack Overflow用户

提问于 2016-11-03 13:14:26

回答 3查看 1.5K关注 0票数 0

背景

我正在创建一个通用的redux应用程序和redux路由器。我拥有大多数的应用程序设置，包括服务器端呈现和基本的redux操作(修改存储中的布尔值)。现在，我想调用一些api来获取我的应用程序的数据。

目前执行情况

我认为使用redux中间件是个好主意，但我无法将数据添加到存储中。我跟踪了文档并创建了一个类似于此的操作。

example-action.js

import { CALL_API } from `redux-api-middleware`;


export function fn_get_data () {
  [CALL_API]: {
    endpoint: 'http://www.example.com/api/users',
    method: 'GET',
    types: ['REQUEST', 'SUCCESS', 'FAILURE']
  }
}

我在页面中单击一个按钮运行此操作。我看到行动被解雇了，但商店里什么也没有。我甚至为SUCCESS操作添加了一些自定义代码，并且能够console.log()响应，但仍然无法将数据输入存储区。

此外，我还按照文档所述的方式向商店添加了中间件。

configureStore.js

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { apiMiddleware } from 'redux-api-middleware';
import reducers from './reducers';

const reducer = combineReducers(reducers);
const createStoreWithMiddleware = applyMiddleware(apiMiddleware)(createStore);

export default function configureStore(initialState) {
  return createStoreWithMiddleware(reducer, initialState);
}

到目前为止

到目前为止，我已经尝试了一系列不同的操作，比如将操作转换为可导出的符号，并在还原器中调用它们，并尝试将数据合并到来自redux中间件中的payload属性的当前状态，但没有成功。

问题

我真的有两个问题

为什么文档中没有减缩器，这只是被忽略了，还是响应中的数据直接进入了存储区？
为什么我调用的数据不被添加到商店(我丢失了什么)？

对此问题的任何帮助、解释或建设性的批评都是非常感谢的，谢谢。

javascript

redux

redux-api-middleware

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-11-04 01:14:24

解决方案

正如markerikson所说，库只为您提供工具，您仍然需要编写还原剂来响应操作。在我的例子中，我终于得到了以下减速器的数据。

example-reducer.js

import * as ExampleActionType from "../action/example-action";
import Immutable from "immutable";

let defaultState = Immutable.fromJS({
  fakeData: {}
});

function exampleState (state = defaultState, action) {
  switch (action.type) {

    case ExampleActionType.REQUEST : {
        console.log(action);
        return state;
    }

    case ExampleActionType.SUCCESS : {
        console.log(action);
        return state.merge({fakeData: action.payload });
    }

    case ExampleActionType.FAILURE : {
        console.log(action);
        return state;
    }

    default:
        return state;
  }
}

我还得导出像这样的符号

example-action.js

export const REQUEST = Symbol('REQUEST');
export const SUCCESS = Symbol('SUCCESS');
export const FAILURE = Symbol('FAILURE');

结论

非常棒的库，它为您提供了创建api请求所需的所有工具，只需很少的代码。希望这能帮助像我一样对这件事感到困惑的人。

票数 2

Stack Overflow用户

发布于 2016-11-03 13:18:25

据我所见，redux-api-middleware提供了一堆用于进行API调用、分发成功/失败操作以及可能处理一些响应的工具。然而，你在减速机中如何处理这些动作取决于你自己。因此，如果您要求中间件分派"MY_REQUEST_SUCCESS"，则需要在还原器逻辑中添加一个"MY_REQUEST_SUCCESS"处理程序，并适当地更新状态。

票数 2

Stack Overflow用户

发布于 2018-08-10 09:12:46

redux-api-middleware不打算将数据存储到存储区(这就是不需要设置任何减缩器的原因)。实际上，我构建了一个库redux-缓存-api-中间件，它在redux-api-middleware之上充当一个瘦层，并添加了缓存(可以很容易地用作一个简单的存储)功能。

下面是一个示例组件：

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import api from 'redux-cached-api-middleware';
import Items from './Items';
import Error from './Error';

class ExampleApp extends React.Component {
  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    const { result } = this.props;
    if (!result) return null;
    if (result.fetching) return <div>Loading...</div>;
    if (result.error) return <Error data={result.errorPayload} />;
    if (result.successPayload) return <Items data={result.successPayload} />;
    return <div>No items</div>;
  }
}

ExampleApp.propTypes = {
  fetchData: PropTypes.func.isRequired,
  result: PropTypes.shape({}),
};

const CACHE_KEY = 'GET/items';

const enhance = connect(
  state => ({
    result: api.selectors.getResult(state, CACHE_KEY),
  }),
  dispatch => ({
    fetchData() {
      return dispatch(
        api.actions.invoke({
          method: 'GET',
          headers: { Accept: 'application/json' },
          endpoint: 'https://my-api.com/items/',
          cache: {
            key: CACHE_KEY,
            strategy: api.cache
              .get(api.constants.CACHE_TYPES.TTL_SUCCESS)
              .buildStrategy({ ttl: 10 * 60 * 1000 }), // 10 minutes
          },
        })
      );
    },
  })
);

export default enhance(ExampleApp);

这项工作以缓存的方式进行，但您可以轻松地传递自定义的shouldFetch函数，并且您将始终从API中重新获取：

const enhance = connect(
  state => ({
    result: api.selectors.getResult(state, CACHE_KEY),
  }),
  dispatch => ({
    fetchData() {
      return dispatch(
        api.actions.invoke({
          method: 'GET',
          headers: { Accept: 'application/json' },
          endpoint: 'https://my-api.com/items/',
          cache: {
            key: CACHE_KEY,
            shouldFetch: () => true
          },
        })
      );
    },
  })
);

设置如下(注意api还原器，它实际上处理对redux状态的存储响应)：

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { apiMiddleware } from 'redux-api-middleware';
import api from 'redux-cached-api-middleware';
import reducers from './reducers';

const store = createStore(
  combineReducers({
    ...reducers,
    [api.constants.NAME]: api.reducer,
  }),
  applyMiddleware(thunk, apiMiddleware)
);