mapStateToProps не обновляется при изменении магазина - PullRequest
Новая
       16

mapStateToProps не обновляется при изменении магазина

0 голосов
/ 01 марта 2019

Я использовал connect из «act-redux », чтобы связать функцию mapStateToProps с компонентом.

Пропорки правильно связаны, когда компонент смонтирован, но не обновляются при изменении хранилища.

Кроме того, store.subscribe () в компоненте корректно срабатывает при изменении хранилища, поэтому кажется, что действие и диспетчер работают.

Отправка выполняется из компонента 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)

Я, наверное, упускаю что-то очевидное.Любая помощь будет оценена.

1 Ответ

0 голосов
/ 01 марта 2019

Ошибка внутри вашего редуктора, когда вы пытаетесь изменить состояние (которое является неизменным). 

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