typescript - React Native + Redux + Typescript 中的 TypeError
问题描述
嗨,我正在尝试使用本文档https://enappd.com/blog/redux-in-react-native-app/92/在 React native 中构建一个简单的 redux 计数器示例, 即使文档使用 javascript 我正在尝试将代码移植到 Typescript。但我收到错误。这是我的代码。Ps react native 的 typescript 样板代码是由官方 RN 文档中使用的 Typescript 模板完成的
计数.ts
import {COUNTER_CHANGE} from '../constants';
export function changeCount(count: number) {
return {
type: COUNTER_CHANGE,
payload: count,
};
}
CountReducer.ts
import {COUNTER_CHANGE} from '../constants';
const initialState = {
count: 0,
};
const countReducer = (state = initialState, action: any) => {
switch (action.type) {
case COUNTER_CHANGE:
return {
...state,
count: action.payload,
};
default:
return state;
}
};
export default countReducer;
应用程序.tsx
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {StyleSheet, View, Button, Text} from 'react-native';
import {connect} from 'react-redux';
import {changeCount} from './actions/counts';
import {bindActionCreators} from 'redux';
interface IRecipeProps {
count: number;
actions: any;
}
interface IRecipeState {}
class App extends Component<any, any> {
decrementCount() {
let {count, actions} = this.props;
count--;
actions.changeCount(count);
}
incrementCount() {
let {count, actions} = this.props;
count++;
actions.changeCount(count);
}
render() {
const {count} = this.props;
return (
<View style={styles.container}>
<Button title="increment" onPress={() => this.incrementCount()} />
<Text>{count.toString()}</Text>
<Button title="decrement" onPress={() => this.decrementCount()} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
const mapStateToProps = (state) => ({
count: state.count,
});
const ActionCreators = Object.assign({}, changeCount);
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators(ActionCreators, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(App);
index.js
import {AppRegistry} from 'react-native';
import React from 'react';
import App from './App';
import {name as appName} from './app.json';
import {Provider} from 'react-redux';
import configureStore from './configureStore';
const store = configureStore();
const RNRedux = () => (
<Provider store={store}>
<App />
</Provider>
);
AppRegistry.registerComponent(appName, () => RNRedux);
配置存储
import {createStore, combineReducers} from 'redux';
import countReducer from './reducers/countReducer';
const rootReducer = combineReducers({count: countReducer});
const configureStore = () => {
return createStore(rootReducer);
};
export default configureStore;
包.json
{
"name": "ReduxExample",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"@types/react-redux": "^7.1.7",
"@types/redux": "^3.6.0",
"react": "16.11.0",
"react-native": "0.62.2",
"react-redux": "^7.2.0",
"redux": "^4.0.5"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/runtime": "^7.6.2",
"@react-native-community/eslint-config": "^1.0.0",
"@types/jest": "^24.0.24",
"@types/react-native": "^0.62.0",
"@types/react-test-renderer": "16.9.2",
"@typescript-eslint/eslint-plugin": "^2.27.0",
"@typescript-eslint/parser": "^2.27.0",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.58.0",
"prettier": "^2.0.4",
"react-test-renderer": "16.11.0",
"typescript": "^3.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}
解决方案
您正在尝试调用该函数,就好像它是actions
对象的属性一样actions.changeCount(count)
- 但您已经changeCount
显式导入,因此您可以直接调用它,例如:
incrementCount() {
let {count, actions} = this.props;
count++;
changeCount(count); // not actions.changeCount
}
推荐阅读
- c# - Dapr:应用从订阅端点返回 http 状态码 500
- sql - 两个查询每个耗时 < 15 秒,但合并耗时 10 分钟?
- javascript - 从 Vuex 商店返回的结构中的神秘空字段
- python - AWS Lambda 和 Fastapi:获取状态码 307
- .net - swagger.json 链接未显示在 swagger 页面中
- javascript - × TypeError:当我更改输入字段中的数据时,无法设置未定义的属性“名称”
- sql - TSQL - 如何避免 UNION ALL
- python - Certbot + Nginx infinite redirect loop fix?
- r - 如何在闪亮中创建 ggraph 反应式布局
- django - 如何从 Django 中的嵌套 M2M 字段中查询记录?