React-Native：将数据传递给 redux 操作以获取 API 结果

Question

我有一个组件，我从中调用一个操作以根据数据从 API 获取结果：

按下此组件时：

调用 componentWillMount 上的 fetchProducts() 函数。

调用以下函数：

fetchProducts(){
   this.props.fetchProductsHomeFromAPI({city:'ABCD'});
}

mapDispatchToProps 是这样的：

function matchDispatchToProps(dispatch){
    return bindActionCreators({selectLocation: selectLocation, fetchProductsHomeFromAPI: fetchProductsHomeFromAPI}, dispatch);
}

操作如下：

var FETCHING_PRODUCTS="FETCHING_PRODUCTS";
var FETCHING_PRODUCTS_SUCCESS = "FETCHING_PRODUCTS_SUCCESS";
var FETCHING_PRODUCTS_FAILURE = "FETCHING_PRODUCTS_FAILURE";
var API = "https://api.abcd.in/get-home-products";

export function fetchProductsHomeFromAPI(data) {
    return (dispatch) => {
        dispatch(getProducts())
        fetch(`${API}`, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        city: data.city
                    })
                })
        .then(res =>res.json())
        .then(json =>dispatch(getProductsSuccess(json.results)))
        .catch(err => dispatch(getProductsFailure()))
    }
}

function getProducts() {
    return {
        type : FETCHING_PRODUCTS,
    }
}

function getProductsSuccess(data) {
    return {
        type : FETCHING_PRODUCTS_SUCCESS,
        data
    }
}

function getProductsFailure(  ) {
    return {
        type : FETCHING_PRODUCTS_FAILURE,
    }
}

联合减速器是：

import {combineReducers} from 'redux';
import LocationReducer from './reducer-location';
import ActiveLocationReducer from './reducer-active-location';
import productsHome from './reducer-products-home';

export default combineReducers({
    location: LocationReducer,
    activeLocation: ActiveLocationReducer,
    productsHome : productsHome,
})

在index.android.js店里是这样的：

import { persistStore, autoRehydrate } from 'redux-persist'
import { Provider } from 'react-redux';
import {createStore, compose } from 'redux';
import combineReducers from './src/Redux/reducers/combineReducers';

const store = compose(autoRehydrate())(createStore)(combineReducers)
persistStore(store, {storage: AsyncStorage}, () => {
  console.log(store);
})


export default class MyApp extends Component {
  render() {
    return (
      <Provider store = {store}>
        <App />
      </Provider>
    );
  }
}

我收到的错误是 动作必须是普通对象。使用自定义中间件进行异步操作。

请帮助我知道这个错误。 我不能将数据传递给我的操作吗？

另一个问题是，我可以在这个动作中使用另一个动作的数据吗？

Answer 1

这里我们能做的是

import * as loginAction from '../../actions/login';

fetchProducts(){
var city = 'ABCD';
this.props.fetchProductsHomeFromAPI(city);
}
const mapDispatchToProps = dispatch => ({
fetchProductsHomeFromAPI: (city) =>  dispatch(loginAction.sendToken(city),
});

这是我已在其中定义动作的动作文件(actions/login)

import { createAction } from 'redux-actions';
function checkdispatch(data) {
return createAction(constant.OPEN_USER_DRAWER)(data);
}

**value will be there in the sendToken function **
export function sendToken(city) {
console.log(city)
**here will call you API**
  dispatch(checkdispatch(true));
}

希望这会帮助您获得行动的价值

React-Native：将数据传递给 redux 操作以获取 API 结果

React-Native: Pass data to redux action to fetch API result

reactjs

react-native

redux

redux-thunk

react-redux