Javascript React/Redux如何传递参数以修改API

在过去的两天里我一直在使用Redux，我对它有了更多的了解，但是我遇到了一个问题，这个问题阻碍了我的进步

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

e、 g.

api.example.com/data/{date}/.

和

api.example.com/more data/{regId}/.

My

选择一个值，该值应该超过调用API并提供所选数据的URL，在我的例子中是

regionId

问题是更改参数时不会导致错误或Api调用出现CORS问题。我还希望能够将

regionId

设置为具有初始状态，这样我就可以使用url中的参数开始请求

ReqService.js（仅用于异步api调用）

actions.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);

import React，{Component}来自“React”
从“react native”导入{View，Text，Picker}
从“../../node_modules/react redux”导入{connect}；
从“./Actions/Actions”导入{gethedata}；
从“redux”导入{bindActionCreators}；
类FrontPage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
regionId:0
};
}
changeRegion=（regId）=>{
this.props.gethedata（regId）；
}
componentDidMount（）{}
render（）{
返回(
头版
this.changeRegion（itemValue）}>
)
}
}
常量mapStateToProps=状态=>{
返回{
数据：state.data，
获取：state.fetching，
错误：state.error
};
};
const mapDispatchToProps=（调度）=>{
返回bindActionCreators（{getTheData}，dispatch）；
};
导出默认连接（mapStateToProps、mapDispatchToProps）（FrontPage）；

---

我不知道我做的是否正确，我看了不同的例子并实现了似乎正确的东西。任何帮助都会很好。

从您正在共享的内容来看，它看起来是React和Redux的一个很好的实现

如果希望选择器组件最初具有选定的值，则将状态设置为其应为的状态。在您的情况下，在

FrontPage

组件中设置state regionId

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

“问题是更改参数时不会导致错误或Api调用出现CORS问题。”

我不确定更改参数时您遇到了哪些问题。你能详细说明或包括一个截图吗

至于CORS错误消息。看一看这篇文章，更好地了解它以及您需要更改的内容。出现此错误时，问题不在客户端应用程序中，而在服务器应用程序中。要修复它，您需要在服务器级别启用CORS支持。 您可以通过设置

访问控制允许原点

标题来完成此操作。e、 g

Access-Control-Allow-Origin: *

---

这将允许任何主机访问API，即使它们位于不同的域或帖子上。

在实施Redux之前，我没有CORS问题，但我认为我调用/更改URL的方式导致了问题。这就是为什么我认为我可能做错了。但我明天还要做更多的测试。但现在我可能会读到CORS。谢谢你的建议+1从您共享的内容来看，创建API url的方式看起来不错。如果你能分享你收到的错误信息，我可以调整我的答案。我会留意你的问题。祝你好运谢谢，我明天会用错误消息更新这个问题，希望我也在使用redux记录器，我也会展示它。

Access-Control-Allow-Origin: *