React Native Redux getState() 始终为 0

React Native Redux getState() always 0

我一直在关注一些 React Redux 教程,因此决定尝试实施其中一个示例:

import {createStore} from 'redux';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.store = createStore(this.counter);
  }

  counter(state = 0, action) {
    switch(action.type) {
      case 'INCREMENT':
        return state + 1;
      break;
      case 'DECREMENT':
        return state - 1;
      break;
      default:
        return state;
      break
    }
  }

  increment() {
    this.store.dispatch({type: 'INCREMENT'});
  }

  render() {
    return (
      <View>
        <Text>{this.store.getState()}</Text>
        <TouchableOpacity onPress={() => this.increment()}>
          <Text>INCREMENT</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

如果我 console.log counterstate 的值,我可以看到它在变化。但是,当我在 render 方法中执行 this.store.getState() 时,它停留在 0

因为你的 Home 组件的属性和状态没有改变,所以它没有重新渲染,这就是为什么你在渲染方法中看不到 Redux 商店的状态更新。

用 React 实现 Redux 的一种更常见的方法是使用 react-redux 将容器组件作为 props 连接到 Redux 状态的特定部分,这样组件将始终正确地重新渲染,因为它的 props 发生了变化随着 Redux 状态的变化。