如何在 react 组件中使用 redux 与 withNavigation 一起使用答案

【问题标题】：How to use redux in react component with withNavigation together如何在 react 组件中使用 redux 与 withNavigation 一起使用
【发布时间】：2021-08-13 15:31:45
【问题描述】：

我正在尝试将一些组件（标题）连接到我的 redux 商店。我已经成功地从其他组件连接了商店并且它工作正常，我认为由于在组件中使用了 withNavigation，我在连接商店时遇到了问题。知道为什么我的组件没有连接到商店吗？

我的减速机

import articles from '../../constants/articles'
const intialState = {
  orderList: articles,
  name: "Please work"
  
};

const orderReducer = (state = intialState, action) => {
  switch (action.type) {
     ....
    default:
      return state;
  }
};
export default orderReducer;

我的 Header 组件没有连接

import React from 'react';
import { withNavigation } from '@react-navigation/compat';
...
import {connect} from 'react-redux'
....

class Header extends React.Component{
...
  const { back, title, white, transparent, bgColor, iconColor, titleColor, navigation, ...props } = this.props;
...

  return (
    <Block style={headerStyles}>
      <Block>
      //************the warn that displayed is "undeinded"****************
        {console.warn(this.props.name)}
        .....
    </Block>
  );
  
}

const styles = StyleSheet.create({
...
});
const mapStateToProps = state =>{
  return{
    name: state.name
  }
}

export default withNavigation(connect(mapStateToProps)(Header))

【问题讨论】：

您能详细说明一下吗？您是否遇到任何错误或只是警告名称未定义？
感谢您的帮助，我没有收到错误/警告消息，我正在尝试使用 "this.props.name" 访问 redux 存储，但我得到的值是 "undeinded "
你可以试试this.props.orderList吗？
我将 map func 更改为，但它仍然“不确定”： const mapStateToProps = state =>{ return{ name: state.name } }

标签： javascript reactjs react-native react-redux react-navigation

【解决方案1】：

我明白错误是什么，我尝试使用连接商店

const mapStateToProps = state =>{
  return{
    name: state.name
  }
}

但我不知道我应该像这样添加 orderReducer：

const mapStateToProps = state =>{
  return{
    name: state.orderReducer.name
  }
}

【讨论】：