react-native - React-Native Redux 无法设置状态

Question

我使用 Redux 为我的导航栏设置了三个 Counters。我可以访问初始状态的值。但我无法更改这些值。我的减速器看起来像这样：

const SET_FREUNDE = 'SET_FREUNDE';
const SET_CHATS = 'SET_CHATS';
const SET_VOTES = 'SET_VOTES';

export function setFreunde(value) {
  return {
    type: SET_FREUNDE,
    value,
  }
}

export function setChats(value) {
  return {
    type: SET_CHATS,
    value,
  }
}

export function setVotes(value) {
  return {
    type: SET_VOTES,
    value,
  }
}

const defaults =
  {
    countervotes: 2,
    counterchats: 1,
    counterfreunde: 1
  };


function counter(state=defaults, action) {
  switch (action.type) {
    case SET_FREUNDE:
      return {...state,counterfreunde: action.value}
      case SET_CHATS:
        return {...state,counterchats: action.value}
        case SET_VOTES:
          return {...state,countervotes: action.value}
    default:{
      return state;
    }
  }
}

export default counter;

现在我想在另一个屏幕上设置计数器：

import * as React from "react";
import { Image, StyleSheet,... } from "react-native";
...

import {connect} from 'react-redux';
import { setChats, setFreunde, setVotes } from '../redux/counter';

class ... extends React.Component<{}, State> {

  constructor(props) {
    super(props);
  }

  ...


  render(){
    return(
      <SafeAreaView style={styles.container}>
        <Button onPress={() => setFreunde(2)}/>
          ...
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  ...
});

const mapDispatchToProps = (dispatch, ownProps) => ({
  setFreunde: () => {
    const { value } = ownProps
    dispatch(setFreunde(value))
  },
  setChats: () => {
    const { value } = ownProps
    dispatch(setChats(value))
  },
  setVotes: () => {
    const { value } = ownProps
    dispatch(setVotes(value))
  }
})

export default connect( null, mapDispatchToProps )(NavStack)

如果我记录 setFreunde(2) 控制台会显示以下内容：

对象{“类型”：“SET_FREUNDE”，“值”：2，}

但是，我在 App.tsx 中检索的值没有改变，如下所示：

const counterfreunde = useSelector((state)=>state.counterfreunde);

我的错误是什么？

标签： react-nativereduxreact-reduxexpo

Answer 1

问题：未调度操作

<Button onPress={() => setFreunde(2)}/>

这里的代码只是调用动作创建者setFreunde。它没有dispatch。

您的函数向您的组件mapDispatchToProps添加了一个不带参数的道具，并使用 from 的值分派操作。 你没有使用这个道具。 您只是在使用动作创建器。您需要从道具调用该函数：setFreundeprops.value

<Button onPress={this.props.setFreunde} title="Set Freunde" />

这修复了功能。如果您在此处尝试使用 typescript，则确实需要添加很多注释。使用功能组件更容易！

import { createStore } from "redux";
import { Provider, connect } from "react-redux";
import React, { Dispatch } from "react";
import { SafeAreaView, Button, Text } from "react-native";

const SET_FREUNDE = "SET_FREUNDE";
const SET_CHATS = "SET_CHATS";
const SET_VOTES = "SET_VOTES";

export function setFreunde(value: number) {
  return {
    type: SET_FREUNDE,
    value
  };
}

export function setChats(value: number) {
  return {
    type: SET_CHATS,
    value
  };
}

export function setVotes(value: number) {
  return {
    type: SET_VOTES,
    value
  };
}

const defaults = {
  countervotes: 2,
  counterchats: 1,
  counterfreunde: 1
};

type State = typeof defaults;

type Action = ReturnType<typeof setVotes | typeof setChats | typeof setFreunde>;

function counter(state: State = defaults, action: Action): State {
  switch (action.type) {
    case SET_FREUNDE:
      return { ...state, counterfreunde: action.value };
    case SET_CHATS:
      return { ...state, counterchats: action.value };
    case SET_VOTES:
      return { ...state, countervotes: action.value };
    default: {
      return state;
    }
  }
}

const store = createStore(counter);

const mapDispatchToProps = (
  dispatch: Dispatch<Action>,
  ownProps: OwnProps
) => ({
  setFreunde: () => {
    const { value } = ownProps;
    dispatch(setFreunde(value));
  },
  setChats: () => {
    const { value } = ownProps;
    dispatch(setChats(value));
  },
  setVotes: () => {
    const { value } = ownProps;
    dispatch(setVotes(value));
  }
});

const mapStateToProps = (state: State) => ({
  freund: state.counterfreunde
});

interface OwnProps {
  value: number;
}

type Props = OwnProps &
  ReturnType<typeof mapDispatchToProps> &
  ReturnType<typeof mapStateToProps>;

class NavStack extends React.Component<Props> {
  render() {
    return (
      <SafeAreaView>
        <Text>Freunde Value: {this.props.freund}</Text>
        <Button onPress={this.props.setFreunde} title="Set Freunde" />
      </SafeAreaView>
    );
  }
}

const Test = connect(mapStateToProps, mapDispatchToProps)(NavStack);

export default function App() {
  return (
    <Provider store={store}>
      <Test value={5} />
    </Provider>
  );
}

代码沙盒演示