mapStateToProps 在存储更改时不会更新

Question

我使用了从" react-redux"连接将mapstatetoprops函数链接到组件。

安装组件时正确链接了道具，但在商店更改时不会更新。

此外，在商店更改时，组件中的一个store.subscribe（）可以正确触发，因此Action和Dispatcher似乎正在工作。

调度是由组件测试进行的。

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

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',
    },
});

testcomponent.js

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)

store.js

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)

我可能缺少一些明显的东西。任何帮助将不胜感激。

Answer 1

错误在您的还原器内部，您正在尝试更改状态（这是不可变的）。

export const reducer = (state = storeData, action) => {
  switch (action.type) {
     case TEST:
        return {
          ...state, // not needed here, but I add this since your production state will likely have more than just one key
          message: action.message
        };
      default:
        return state
   }
}