我一直在使用Redux在过去的两天里,我越来越了解它更多,但我遇到了一个问题,停止了我的进步.
我有一个API,其中有可互换的参数。
例如api.example.com/data/{date}/..
和api.example.com/more-data/{regId}/..
我的<Picker />
选择了一个值,这个值应该传递给URL,URL调用API并给出所选的数据;在我例子中是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()
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);
我不知道我这样做是否正确,我看了不同的例子,并实现了什么似乎是正确的。任何帮助将是伟大的。
1条答案
按热度按时间2nbm6dog1#
从您分享的内容来看,它看起来是React和Redux的一个很好的实现。
如果你想让Picker组件一开始就有一个选中的值,那么就把你的状态设置成它应该有的样子,在你的例子中,在你的
FrontPage
组件中设置state regionId。我不确定你在修改参数时遇到了什么问题。你能详细说明一下或者附上一个截图吗?
至于CORS错误消息。请参阅文章How to fix CORS problems以更好地了解它以及您需要更改的内容。出现此错误时,问题不在客户端应用程序中,而是在服务器应用程序中。要修复此错误,您需要在服务器级别启用CORS支持。您可以通过设置
Access-Control-Allow-Origin
标头来完成此操作。例如:这将允许任何主机访问API,即使它们位于不同的域或帖子中。