React native 存储更改时,MapStateTops不会更新
我使用connect from react redux将mapStateToProps函数链接到组件 安装组件时,道具已正确链接,但当存储更改时,道具不会更新 此外,组件中的store.subscribe在存储更改时会正确触发,因此操作和调度程序似乎正在工作 调度是从组件测试中进行的 我创建了一个最小的项目来重现这个问题 App.js:React native 存储更改时,MapStateTops不会更新,react-native,redux,react-redux,React Native,Redux,React Redux,我使用connect from react redux将mapStateToProps函数链接到组件 安装组件时,道具已正确链接,但当存储更改时,道具不会更新 此外,组件中的store.subscribe在存储更改时会正确触发,因此操作和调度程序似乎正在工作 调度是从组件测试中进行的 我创建了一个最小的项目来重现这个问题 App.js: import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {store} from "./store";
import TestComponent from "./TestComponent";
import {Provider} from "react-redux";
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Provider store={store}>
<TestComponent/>
</Provider>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
我可能错过了一些明显的东西。任何帮助都将不胜感激。错误在您的减速机中,您试图改变不变的状态 export const reducer=state=storeData,action=>{ 开关动作类型{ 案例测试: 返回{ …状态,//此处不需要,但我添加了它,因为您的生产状态可能不止一个键 消息:action.message }; 违约: 返回状态 } }
错误就在你的减速器里,你试图改变不变的状态 export const reducer=state=storeData,action=>{ 开关动作类型{ 案例测试: 返回{ …状态,//此处不需要,但我添加了它,因为您的生产状态可能不止一个键 消息:action.message }; 违约: 返回状态 } }
哦,上帝,谢谢你。我花了几个小时在这上面,它是如此简单。直到今天,我才对这个不可更改的东西有过异议。再次感谢!哦,上帝,谢谢你。我花了几个小时在这上面,它是如此简单。直到今天,我才对这个不可更改的东西有过异议。再次感谢!
import React, {Component} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {testDispatcher} from "./store";
import {connect} from "react-redux";
import {store} from './store'
class TestComponent extends Component {
constructor(props) {
super(props)
this.state = {
message: store.getState().message
}
}
componentWillReceiveProps(nextProps){
console.log("updating")
console.log(nextProps)
}
componentDidMount() {
store.subscribe(() => {
this.setState({
message: store.getState().message
})
})
}
render() {
console.log(this.props)
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => {
console.log("onpress")
store.dispatch(testDispatcher("updated value"))
}}
><Text>Test</Text></TouchableOpacity>
<Text>data by subscribe : {this.state.message}</Text>
<Text>data by props : {this.props.message}</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
const mapStateToProps = state => {
return {
message: state.message
}
}
export default connect(mapStateToProps)(TestComponent)
import {createStore} from "redux";
const TEST = "TEST"
const storeData = {
message: "default value"
}
export function testDispatcher(message){
console.log("in dispatcher")
return {
type : TEST,
message
}
}
export const reducer = (state = storeData, action) => {
switch (action.type) {
case TEST:
state.message = action.message
console.log("new state", state)
return state
default:
return state
}
}
export const store = createStore(reducer)