Question

我一直在关注一些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 state counter的价值，我可以看到它发生了变化。但是，当我在this.store.getState()方法中render时，它会保持为0

Answer 1

由于您的主页组件的道具和状态未发生变化，因此无法重新呈现，这就是您没有看到Redux商店状态更新的原因在渲染方法中。

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

React Native Redux getState（）始终为0

1 个答案: