React native 存储更改时,MapStateTops不会更新

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

我使用connect from react redux将mapStateToProps函数链接到组件

安装组件时,道具已正确链接,但当存储更改时,道具不会更新

此外,组件中的store.subscribe在存储更改时会正确触发,因此操作和调度程序似乎正在工作

调度是从组件测试中进行的

我创建了一个最小的项目来重现这个问题

App.js:

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)