商店更改时 mapStateToProps 不更新

Question

我使用“react-redux”中的 connect 将 mapStateToProps 函数链接到组件。

当组件被挂载时，props 被正确链接，但是当 store 改变时它们不会更新。

除了组件中的 store.subscribe() 会在 store 更改时正确触发，因此 action 和 dispatcher 似乎正在工作。

dispatch 是由 componentTest 进行的。

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

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

错误在你的reducer内部，你试图改变状态（它是不可变的）。

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
   }
}