React-Native Redux 无法设置状态

Posted 2023-02-19

【中文标题】React-Native Redux 无法设置状态

【英文标题】：React-Native Redux unable to set state

【发布时间】：2021-06-03 03:19:31

【问题描述】：

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

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);

我的错误是什么？

【问题讨论】：

您只有counter 状态吗？ counterfreunde选择器是返回初始值还是未定义？

选择器返回初始状态。我有三个计数器状态

【参考方案1】：

问题：未调度操作

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

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

您的mapDispatchToProps 函数向您的组件添加了一个道具setFreunde，它不接受任何参数并使用来自props.value 的值调度操作。 你没有使用这个道具。你只是在使用动作创建器。你需要从 props 中调用函数：

<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>
  );

Code Sandbox Demo

【讨论】：

感谢您的帮助。我需要改变什么才能在课堂上使用整个东西？我已经进行了您的更改，但是 this.props.setFriends 不起作用：TypeError: _this3.props.setFreunde is not a function. (In '_this3.props.setFreunde(2)', '_this3.props.setFreunde' is undefined)