React 组件没有获取最新的 redux 状态值

Question

我在使用 Redux 的 React Native 应用程序时遇到问题，我一直在努力找出原因。

当组件 A 中的调度更改 Redux 状态时，组件 B 不会显示 Redux 状态的最新值。比如我点击组件A中的一个按钮将Redux值从0更改为1，它会在组件B中显示0，但是当我单击按钮添加1使其成为2时，组件B会显示1。下面是我的代码的一个例子。当我单击组件 A 中的 TouchableOpacity 时，它应该将 this.props.screen 从 1（初始状态）更改为 0。在组件 B 中，我有一个 this.props.screen 的常规 console.log 和一个控制台。以 50 毫秒记录在 setTimeout 内。在控制台内部，setTimeout 中的console.log 在命中时的正确值为0，但在它外面的仍然显示为1。同样，在组件B 中呈现的文本也将显示为1。如果我再次单击该按钮，它将显示 0。

我已经从我的代码中包含了相关的操作和减速器。起初，我认为这可能是一种突变，但似乎只能发生在对象和数组中（我只使用了一个数字）。我会很感激一些帮助，弄清楚如何让组件 B 中呈现的文本反映最新的值。提前致谢！

组件 A

    import { connect } from "react-redux";
    import { setScreen } from "../redux/Actions";

    class Header extends Component {


      componentWillReceiveProps(nextProps){
        setTimeout(() => { this.logoHide() },10);
        this.props.scrollLocation < 10 ? this.changeTransparency(0) : this.changeTransparency(.9);
      }

      setScreen(screen){
        this.props.setScreen(screen);
      }

      render() {

        var {height, width} = Dimensions.get('window');

        return (
          <View>    
              <TouchableOpacity onPress={() => this.setScreen(0)}>
                <Text>Click Me</Text>
              </TouchableOpacity>
          </View>
        );
      }
    }
const mapStateToProps = state => {
  return {
    height: state.height,
    platform: state.platform,
    screen: state.screen,
    scrollLocation: state.scrollLocation
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setScreen: (value) => dispatch(setScreen(value))
  };
};

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

Redux 操作

import { SET_SCREEN } from './Constants';
    export const setScreenDispatcher = (value) => ({ type: SET_SCREEN, screen: value});
    export const setScreen = (value) => {
        return (dispatch) => {
            dispatch(setScreenDispatcher(value));
        }
    }

Redux Reducer

import { combineReducers } from 'redux';
import { SET_SCREEN } from "./Constants";

const initialState = []

const screen = (state = 1, action) => {
  switch (action.type) {
    case SET_SCREEN:
      return action.screen;
    default:
      return state;
  }
};

// COMBINE REDUCERS //
export default combineReducers({
  screen
});

组件 B

import { connect } from "react-redux";

class VisibleMenus extends Component {

componentWillUpdate(){
    console.log(this.props.screen);
    setTimeout(() => {console.log(this.props.screen)},50);
    }
  }
 render() {

    return (
      <View>
    <Text>{this.props.screen}</Text>
 </View>
    );
  }
}
const mapStateToProps = state => {
  return {
    screen: state.screen
  };
};

const mapDispatchToProps = dispatch => {
  return {

  };
};

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

App.js

import React, {Component} from 'react';

import { Provider } from "react-redux";

import VisibleMenus from './VisibleMenus';

import { Store } from "./redux/Store";

const store = Store();

export default class App extends Component {

  render() {

    return (

      <Provider store={store}>

        <VisibleMenus />

      </Provider>

    );

  }

}

Store.js

// REDUX STORE //

import { createStore, applyMiddleware } from "redux";

import rootReducer from "./Reducers";

import ReduxThunk from 'redux-thunk'



export const Store = (initialState) => {

    return createStore(

    rootReducer,

        initialState,

        applyMiddleware(ReduxThunk)

    );

}

Answer 1

对于遇到此问题的任何人，我想我会分享我是如何解决它的。

我研究了突变，我肯定没有改变状态，但是当 Redux 存储发生变化时，我的组件不会更新。

我尝试同时使用 componentWillUpdate() 和 componentWillReceiveProps() 但两者都没有改变任何东西。但是，我在 this.props.screen 和 this.state.screen 之间进行了比较，这最终成为我的问题。

我应该在 componentWillReceiveProps(nextProps) 中与 nextProps.screen 和 this.state.screen 进行比较，最终解决了所有问题。

我要感谢 Hasith 的帮助。