javascript - React/Redux 如何传递参数来修改 API

Question

这两天我一直在使用 Redux，我对它的理解越来越多，但是我遇到了一个问题，让我的进步停滞不前。

我有一个具有可互换参数的 API。

例如api.example.com/data/{date}/..和 api.example.com/more-data/{regId}/..

我的 <Picker />选择一个值，该值应传递给调用 API 并提供所选数据的 URL；就我而言 regionId .

问题是在不引起错误的情况下更改参数或在 Api 调用中出现 CORS 问题。我还希望能够设置 regionId有一个 initialState，所以我可以用 url 中的参数开始请求。

ReqService.js(仅用于异步 api 调用)

class ReqService {
    async getRequest(url) {
        try {
            let response = await (await fetch(url));
            let responseJson = await response.json();
            return responseJson;
        } catch (error) {
            console.error('Error: ', error);
        }
    }
}
export default new ReqService()

Action .js

import ReqService from '../ReqService';

export const IS_FETCHING = 'IS_FETCHING';
export const DATA_FETCHED = 'DATA_FETCHED';
export const ERROR_FETCHING_DATA = 'ERROR_FETCHING_DATA';

const BASE_URL = 'https://api.example.com/';
const DATE_TODAY = new Date().toISOString();

export const getTheData = (regionId) => { 
  // The regionId is the param i want to pass to the url
  const url = `${BASE_URL}/${DATE_TODAY}/${regionId}`;
  const request = ReqService.getRequest(url);

  return dispatch => {
    dispatch({ type: IS_FETCHING });
    request
      .then((data ) => {
        dispatch({ type: DATA_FETCHED, payload: data });
      })
      .catch(error => {
        dispatch({ type: ERROR_FETCHING_DATA, payload: error });
      });
  };
};

reducer.js

import { IS_FETCHING, DATA_FETCHED, ERROR_FETCHING_DATA } from '../Actions/actions';

const initialState = {
  data: [],
  fetching: false,
  fetched: false,
  error: null
};

export const myReducer = (state = initialState, action) => {
  console.log(action);
  switch (action.type) {
    case IS_FETCHING:
      return { ...state, fetching: true };
    case DATA_FETCHED:
      console.log('The Data Fetched ', action.payload);
      return {
        ...state,
        fetched: true,
        fetching: false,
        data: action.payload.data
      };
    case ERROR_FETCHING_DATA:
      return { ...state, fetching: false, error: action.payload.error };
    default:
      return state;
  }
};

此处参数变化的组件:

import React, { Component } from 'react'
import {View, Text, Picker} from 'react-native'
import { connect } from '../../node_modules/react-redux';
import { getTheData } from './Actions/actions';
import { bindActionCreators } from "redux";

class FrontPage extends Component {
  constructor(props){
    super(props);
    this.state = {
      regionId:0
    };
  }

  changeRegion = (regId) => {
    this.props.getTheData(regId);
  }

  componentDidMount() {}

  render() {
    return (
      <View>
        <Text>Front Page</Text>
        <Picker selectedValue={this.props.regionId}
                    onValueChange={itemValue => this.changeRegion(itemValue)}>
                    <Picker.Item label="One" value='1' />
                    <Picker.Item label="Two" value='2' />
                </Picker>
      </View>
    )
  }
}

const mapStateToProps = state => {
  return {
    data: state.data,
    fetching: state.fetching,
    error: state.error
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ getTheData }, dispatch);
};

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

我不知道我这样做是否正确，我查看了不同的示例并实现了看起来正确的方法。任何帮助都会很棒。

Answer 1

从您分享的内容来看，它看起来像是 React 和 Redux 的良好实现。

如果您希望 Picker 组件最初有一个选定的值，请将您的状态设置为它应有的状态。在您的情况下，在您的 FrontPage 组件中设置状态 regionId。

this.state = {
  regionId: 1 // this will pre-select the first value.
};

“问题是在不导致错误或 Api 调用出现 CORS 问题的情况下更改参数。”

我不确定您在更改参数时遇到了哪些问题。您能否详细说明或附上屏幕截图？

至于CORS错误信息。看看文章How to fix CORS problems更好地了解它以及您需要更改的内容。出现此错误时，问题不在客户端应用程序中，而是在服务器应用程序中。要修复它，您需要在服务器级别启用 CORS 支持。您可以通过设置 Access-Control-Allow-Origin header 来执行此操作。例如

Access-Control-Allow-Origin: *

这将允许任何主机访问 API，即使他们在不同的域或帖子中也是如此。