Конкретные ошибки, которые я получаю, меняются в зависимости от изменений, которые я делаю, однако текущая ошибка, которую я имею, - «Действия могут не иметь неопределенный тип ...». Я очень новичок в использовании Redux, но я искал в интернете все, что достаточно последовательно для меня, чтобы следовать.
TLDR: я пытаюсь просто отправить список объектов, которые выглядят следующим образом: records: [{date: blah, ...., var: blah}, {...}]
к глобальному состоянию, чтобы я мог использовать его во всех частях моего полного приложения.
Я пытался изменить метод mapDispatchToProps различными способами, но мне все еще очень трудно пытаться соединить все это.
Я попытался изменить App.js, а также действия, редукторы и хранить файлы соответственно, но все это похоже на ту же инструкцию, которой я следовал. показано здесь: https://www.youtube.com/watch?v=KcC8KZ_Ga2M
Ниже приведен соответствующий код:
App.js
'' '
import React, { Component } from 'react';
import {
createStackNavigator,
createAppContainer } from 'react-navigation';
import MainScreen from './screens/MainScreen';
import CostAnalysis from './screens/CostAnalysis';
import DriverLog from './screens/DriverLog';
// REDUX IMPORTS
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { recordReducer } from './reducers/recordReducer';
const MainNavigator = createStackNavigator({
Home: {screen: MainScreen,
navigationOptions: {
header: null,
}},
CostAnalysis: {screen: CostAnalysis},
DriverLog: {screen: DriverLog}
}, {
defaultNavigationOptions: {
header: null
}
});
const AppContainer = createAppContainer(MainNavigator);
const store = createStore(recordReducer);
class App extends Component {
render() {
return (
<Provider store={store}>
<AppContainer />
</Provider>
);
}
}
export default (App);
'' '
МОЙ Второй экран, к которому я перемещаюсь и отправляю данные в этом примере
'' '
import React, {Component} from 'react';
import {
StyleSheet,
View,
Text,
Dimensions,
TouchableOpacity,
YellowBox,
} from 'react-native';
// REDUX IMPORTS
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/Ionicons';
const device = Dimensions.get('window');
class CostAnalysis extends Component {
render() {
return (
<View style={styles.mainContainer}>
<Text>Hey you got here!</Text>
<Text>{this.props.records[0]}</Text>
</View>
)
}
}
const styles = StyleSheet.create({
mainContainer: {
height: device.height - 60,
position: 'absolute',
bottom: 0
}
});
function mapStateToProps(state) {
return {
records: state.records
}
}
export default connect(mapStateToProps)(CostAnalysis);
'' '
MainScreen.js
'' '
import React, {Component} from 'react';
import {
StyleSheet,
View,
Text,
Dimensions,
TouchableOpacity,
YellowBox,
} from 'react-native';
// REDUX IMPORTS
import { connect } from 'react-redux';
import ADD_RECORD from '../actions/types';
import {addRecord} from '../actions/index';
import Icon from 'react-native-vector-icons/Ionicons';
import LinearGradient from 'react-native-linear-gradient';
import SpecialInput from '../components/SpecialInput';
import DateTimePicker from 'react-native-modal-datetime-picker';
import SpecialText from '../components/SpecialText';
import GenericButton from '../components/GenericButton';
const devWidth = Dimensions.get('window').width;
const devHeight = Dimensions.get('window').height;
class MainScreen extends Component {
componentWillMount() {
YellowBox.ignoreWarnings([
'Warning: componentWillMount is deprecated',
'Warning: componentWillReceiveProps is deprecated',
]);
}
// State stuff
state = {
date: 'Date',
dateColor: 'rgba(255,255,255,0.6)',
starting: '',
ending: '',
gasPriceCurrent: '',
visible: false,
}
stringifyNumbers = (inputObj) => {
return inputObj.toString().replace(/[^0-9.]/g, '')
}
handleDateConfirm = value => {
this.setState({
date: value.toString().substring(4, 15),
dateColor: 'rgba(255,255,255,1)'
});
// Hide the date picker
this.hideDatePicker();
}
handleStartChange = (value) => {
this.setState({
starting: value
});
}
handleEndChange = (value) => {
this.setState({
ending: value
});
}
handleGasChange = (value) => {
this.setState({
gasPriceCurrent: value
});
}
hideDatePicker = () => {
this.setState({
visible: false
});
}
showDateTimePicker = () => {
this.setState({
visible: true,
dateColor: 'rgba(255,255,255,0.6)'
});
}
recordEntry = () => {
const record = {
date: this.state.date,
startKM: this.state.starting,
endKM: this.state.ending,
curPrice: this.state.gasPriceCurrent
}
// This is where I try to add the record to the list
this.props.addRecord(record);
// Now go to confirmation
this.props.navigation.navigate('CostAnalysis');
// Reset input fields after recording entry
this.resetInput();
}
// Reset input fields
resetInput = () => {
this.setState({
date: 'Date',
dateColor: 'rgba(255,255,255,0.6)',
starting: '',
ending: '',
gasPriceCurrent: '',
visible: false
});
}
render() {
return (
<LinearGradient
colors = {['#051937', '#A8EB12']}
style ={styles.homeScreen}
locations = {[0.23, 1]}
start={{x: 0, y: 0}}
end={{x: 0, y: 1}}>
<Text style={styles.heading}>Hello</Text>
<Text style={styles.subHeading}>
Please start recording your starting and ending gas amounts
</Text>
<View style={styles.inputContainer}>
<TouchableOpacity onPress={this.showDateTimePicker}>
<SpecialText
content = {this.state.date}
style={{
fontSize: 22,
color: this.state.dateColor
}}
/>
</TouchableOpacity>
<DateTimePicker
isVisible={this.state.visible}
onConfirm={this.handleDateConfirm}
onCancel={this.hideDatePicker}
/>
<SpecialInput
placeholder = {"Starting"}
iconName = 'ios-car'
iconText= ' KM'
maxLength={3}
style={styles.inputStyle}
value={this.state.starting}
placeholderTextColor={'rgba(255,255,255, 0.6)'}
onChange = {this.handleStartChange}
/>
<SpecialInput
placeholder = {"Ending"}
iconName = 'ios-car'
iconText= ' KM'
maxLength={3}
style={styles.inputStyle}
value={this.state.ending}
placeholderTextColor={'rgba(255,255,255, 0.6)'}
onChange={this.handleEndChange}
/>
<SpecialInput
placeholder = {"Current Gas Prices"}
iconName = 'ios-pricetags'
iconText= ' cents'
maxLength={5}
style={styles.inputStyle}
value={this.state.gasPriceCurrent}
placeholderTextColor={'rgba(255,255,255, 0.6)'}
onChange={this.handleGasChange}
/>
{/* Record the entry into data storage */}
<GenericButton
style={styles.recordButton}
textColor={'#ffffff'}
placeholder = "RECORD"
onPress={this.recordEntry} />
{/* RESET BUTTON */}
<GenericButton
style={styles.clearButton}
textColor={'#ffffff'}
placeholder = "CLEAR"
onPress={this.resetInput} />
</View>
</LinearGradient>
);
}
}
function mapStateToProps(state) {
return {
records: state.records
}
}
// Here is where I noticed most of the errors pointing to
const mapDispatchToProps = dispatch => {
return {
addRecord: (record) => {
dispatch(addRecord(record))
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(MainScreen)
'' '
my recordReducer.js
'' '
// recordReducer.js
import { ADD_RECORD } from '../actions/types'
const initialState = {
records: ['Chicken Joe']
};
const recordReducer = (state = initialState, action) => {
switch(action.type) {
case ADD_RECORD:
return {
...state,
records: state.records.concat(action.value)
};
default:
return state;
}
}
export {recordReducer};
'' '
действия / index.js
'' '
import ADD_RECORD from './types';
// Add Record Action
export const addRecord = record => {
return {
type: ADD_RECORD,
payload: record
}
}
'' '
действия / types.js
'' '
export const ADD_RECORD = 'ADD_RECORD';
'' '
Как упоминалось ранее, я просто хочу выяснить, как сохранить данные в хранилище и извлечь их позже из любого компонента / экрана / представления.
Большое спасибо всем, кто пытается мне помочь! Я занимаюсь этим уже 12 часов подряд: (
РЕДАКТИРОВАТЬ 1:
Это новая ошибка, которую я получаю. Единственное изменение состоит в том, что в actions/index.js я сделал правильное named import.
Сообщение об ошибке