react-native - 当使用 redux 进行 react native 状态更改时，连接不会刷新

Question

我已经花了 5 个小时来解决这个问题，但它显然不想工作......

我想在我的 home 组件上检测到 onScroll 时调度该事件，并在我的 TopNavigation 组件中接收状态“true”或“false”

目前，我的 reducer 运行良好(在渲染之前使用 console.log(nextState) )，但我的印象是该连接不适用于 connect(mapStatetoProps)(TopNavigation)，因为我的组件不会重新渲染

谢谢您的回答

//TopNavigation

import React from 'react'
import { connect } from 'react-redux'


class TopNavigation extends React.Component {
    constructor(props) {
        super(props)
    }


    componentDidMount() {
        console.log(this.props.scrollData)
    }
}

// Render things...

const mapStatetoProps = (state) => {
    return {
        scrollData: state.scrollData
    }
}

export default connect(mapStatetoProps)(TopNavigation)

// Home

import React from 'react'
import { StyleSheet, View, FlatList } from 'react-native'
import gStyles from '../../../Styles/global'
import { connect } from 'react-redux'

// Partials
import ItemBox from '../../Partials/ItemBox'
import TopNavigation from '../../Partials/TopNavigation'

// Data
import recetteData from '../../../api/recetteData'


class Home extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <View style={styles.mainContainer}>
                <FlatList
                    data={recetteData}
                    keyExtractor={(item) => item.id.toString()}
                    onPress={() => this._toggleSet()}
                    renderItem={({ item }) => <ItemBox item={item} />}
                    onScroll={(event) => this.props.dispatch({ type: "POSITION", value: event.nativeEvent.contentOffset.y })}
                    style={styles.flatListContainer} />
                <TopNavigation />
            </View>
        )
    }
}

export default connect(mapStateToProps)(Home)

//ScrollData Reducer

const initialState = {
    scrollData: {
        scrolled: false
    }
}

function scrollData(state = initialState, action) {
    let nextState
    switch (action.type) {
        case 'POSITION':
            if (action.value > 0) {
                nextState = {
                    ...state,
                    scrollData: {
                        ...state.scrollData,
                        scrolled: true,
                    },
                }
            }
            else {
                nextState = {
                    ...state,
                    scrollData: {
                        ...state.scrollData,
                        scrolled: false
                    },
                }
            }
            return nextState.scrollData.scrolled
        default:
            return state
    }
}

export default scrollData

//ConfigureStore

import { createStore } from 'redux';
import buttonPreference from './Reducers/buttonPreference'
import scrollData from './Reducers/scrollData'


export default createStore(/*buttonPreference,*/scrollData)

在控制台上(TopNavigation的componentDidMount的console.log):

对象{ “滚动”:假，}

但是当我滚动时没有变化

这是我的 package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^32.0.6",
    "react": "^16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.1.tar.gz",
    "react-native-elevated-view": "0.0.6",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-paper": "^2.12.0",
    "react-native-responsive-dimensions": "^2.0.1",
    "react-navigation": "^2.0.1",
    "react-navigation-material-bottom-tabs": "^0.4.0",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "react-test-renderer": "^16.6.0-alpha.8af6728",
    "schedule": "^0.4.0"
  },
  "private": true
}

更新

安装 TopNavigation:

//TopNavigation

    constructor(props) {
        super(props)
        this.state = {
            scrolledState: false
        }
    }

    componentDidUpdate(prevProps) { // Instead of componentDidMount
        if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
            console.log(this.props.scrollData);
            this.setState({ scrolledState: this.props.scrollData });
        }
    }

但它仍然不起作用，没有事件或状态改变......

更新2

商店似乎工作正常，更准确地说，问题是它没有实时更新组件。

如果我填充商店，我会安静并使用导航返回页面，数据会发生很大变化。

真正的问题是，为什么组件没有实时更新reducer传递的新存储数据......

更新3

生产模式下的世博会解决了问题...

Answer 1

在大多数情况下，您所做的一切都是正确的。问题出在您的 TopNavigation 文件上。这里需要记住两件重要的事情:

1. componentDidMount() 在组件第一次渲染时仅调用一次。因此，即使您的 connect 工作正常，您也不会多次调用此函数。要检查您的 props 是否已正确更新，您可以在 componentDidUpdate() 内添加一个 console.log()，如下所示:

    componentDidUpdate(prevProps) {
        if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
            console.log(this.props.scrollData);
        }
    }
   

2. 另请记住，这不会导致组件重新渲染。仅当组件的状态发生更改时，组件才会重新呈现。您可以在 props 中使用此更改来触发状态更改，这将再次调用 render 函数，以触发组件的重新渲染，如下所示:

   state = {scrolledState: false};
   
   ...
   ...
   
   componentDidUpdate(prevProps) {
       if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
           // console.log(this.props.scrollData);
           this.setState({scrolledState: this.props.scrollData});
       }
   }
   

希望这有帮助!