React Native + Redux + Typescript 中的 TypeError

Question

您好，我正在尝试使用本文档 https://enappd.com/blog/redux-in-react-native-app/92/ 在 React Native 中使用 typescript 构建一个简单的 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;

App.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"
    ]
  }
}

错误

Answer 1

您尝试调用该函数，就好像它是 actions 对象的属性 - actions.changeCount(count) - 但您已经显式导入了 changeCount，因此您可以直接调用它，例如：

incrementCount() {
  let {count, actions} = this.props;
  count++;
  changeCount(count); // not actions.changeCount
}