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
counter
中 state
的值,我可以看到它在变化。但是,当我在 render
方法中执行 this.store.getState()
时,它停留在 0
因为你的 Home 组件的属性和状态没有改变,所以它没有重新渲染,这就是为什么你在渲染方法中看不到 Redux 商店的状态更新。
用 React 实现 Redux 的一种更常见的方法是使用 react-redux 将容器组件作为 props 连接到 Redux 状态的特定部分,这样组件将始终正确地重新渲染,因为它的 props 发生了变化随着 Redux 状态的变化。
我一直在关注一些 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
counter
中 state
的值,我可以看到它在变化。但是,当我在 render
方法中执行 this.store.getState()
时,它停留在 0
因为你的 Home 组件的属性和状态没有改变,所以它没有重新渲染,这就是为什么你在渲染方法中看不到 Redux 商店的状态更新。
用 React 实现 Redux 的一种更常见的方法是使用 react-redux 将容器组件作为 props 连接到 Redux 状态的特定部分,这样组件将始终正确地重新渲染,因为它的 props 发生了变化随着 Redux 状态的变化。