使用带有 typeScript 的 redux

Question

我是新手，最近才使用 Redux。

这是我的代码：

import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import { controlComponent1 } from "../redux/reduce";

import style from "./style";

const Component1 = (props) => {
  const navigation = useNavigation();
  return (
    <View
      style={[
        props.style,
        style.container,
        props.show1 ? { backgroundColor: "green" } : null
      ]}
    >
      <Text>show cai nay :v ...</Text>
      <TouchableOpacity style={style.button} onPress={() => props.chance1}>
        <Text>color</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={style.button}
        onPress={() => navigation.navigate("component2")}
      >
        <Text> next</Text>
      </TouchableOpacity>
    </View>
  );
};

function mapStateToProps(state) {
  return {
    show1: state.show1
  };
}

function mapDispatchToProps(dispatch) {
  return {
    chance1: dispatch(controlComponent1)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Component1);

我知道mapDispatchToProps() 和mapStateToProps() 两个函数将使chance1 和show1 两个值成为我组件的道具，但我不知道如何在我的组件中使用它，因为我使用的是TypeScript .

我在这些图片上收到警告：

谁能帮我解决这个问题？

Answer 1

如果你分两步分离你的连接，你可以获得你的道具类型，以便有一个备用的 const 来推断类型：

import { connect, ConnectedProps } from 'react-redux';

const connector = connect(mapStateToProps, mapDispatchToProps)
type Props = ConnectedProps<typeof connector> //your props type

export default connector(Component1)

然后使用你的组件：

const Component1 = (props:Props) => {}

Answer 2

您的组件需要知道它正在接收什么道具才能访问它们。所以我们需要为组件的 props 声明一个类型，其中包括 Redux connect 添加的 props 以及调用时传递给组件的 props。

您可以将类型直接分配给props，例如= (props: Component1Props) =>，或者将React.FunctionComponent<Props> / React.FC<Props> 类型分配给具有正确道具的组件，例如const Component1: FunctionComponent<Component1Props> = (props) =>

在组件中使用useSelector 和useDispatch 比connect 更容易获得打字稿支持。还有this is the recommended approach。

带挂钩

import React, { FunctionComponent } from "react";
import { View, Text, TouchableOpacity, ViewStyle } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import { controlComponent1 } from "../redux/reduce";
import style from "./style";
import { RootState } from "./path/store";
// ^ some type for your app's specific state type

interface Component1Props {
  // own props
  style?: ViewStyle;
}

const Component1: FunctionComponent<Component1Props> = (props) => {
  const navigation = useNavigation();

  // type will be automatically inferred if `RootState` is correct
  const show1 = useSelector((state: RootState) => state.show1);

  // we don't map dispatch the same way with hooks
  // we get access to the dispatch function and then call it
  const dispatch = useDispatch();

  return (
    <View
      style={[
        props.style,
        style.container,
        show1 ? { backgroundColor: "green" } : null
      ]}
    >
      <Text>show cai nay :v ...</Text>
      <TouchableOpacity
        style={style.button}
        // call dispatch with the action from your action creator
        onPress={() => dispatch(controlComponent1())}
      >
        <Text>color</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={style.button}
        onPress={() => navigation.navigate("component2")}
      >
        <Text> next</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Component1;

使用连接

import React, {FunctionComponent} from "react";
import { View, Text, TouchableOpacity, ViewStyle } from "react-native";
import { connect } from "react-redux";
import {Dispatch} from "redux";
import { useNavigation } from "@react-navigation/native";
import { controlComponent1 } from "../redux/reduce";
import style from "./style";
import {RootState} from "./path/store";
// ^ some type for your app's specific state type

interface Component1Props {
  // own props
  style?: ViewStyle;
  // from mapStateToProps
  show1: boolean;
  // from mapDispatchToProps
  chance1: () => void;
}

const Component1: FunctionComponent<Component1Props> = (props) => {
  const navigation = useNavigation();
  return (
    <View
      style={[
        props.style,
        style.container,
        props.show1 ? { backgroundColor: "green" } : null
      ]}
    >
      <Text>show cai nay :v ...</Text>
      <TouchableOpacity style={style.button} onPress={() => props.chance1}>
        <Text>color</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={style.button}
        onPress={() => navigation.navigate("component2")}
      >
        <Text> next</Text>
      </TouchableOpacity>
    </View>
  );
};

function mapStateToProps(state: RootState) {
  return {
    show1: state.show1
  };
}

function mapDispatchToProps(dispatch: Dispatch) {
  return {
    // if this is an action creator then you need to call it!
    chance1: dispatch(controlComponent1())
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Component1);