действие не изменяет состояние

Question

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

Я ожидаю, что реквизиты после отправки действия будут следующими:

{addUserMetaData: ƒ addUserMetaData(user_object),
 user: {firestore_doc: {name: "Joe"}}
}

Что мне здесь не хватает?

Чтобы воспроизвести, react-native-init mwe, затем добавьте следующий код. Я добавил изображение из журналов приложений ниже.

App.js

import React, { Component} from 'react';
import { View } from 'react-native';
import Screen from './src/screen';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

const userReducer = function userReducer(state = {}, action) {
  console.log('action', action);
  switch (action.type) {

    case "ADD_USER_METADATA":
      return { ...state, firestore_doc: action.payload };

    default:
      return { ...state };
  }
};
const store = createStore(userReducer);


export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <View>
            <Screen />
        </View>
      </Provider>
    );
  }
};

ЦСИ / screen.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { connect } from 'react-redux';

const addUserMetaData = (user) => ({
    type: "ADD_USER_METADATA",
    payload: user
})

class Screen extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        const user = { name: "Joe" };
        console.log('props', this.props);
        this.props.dispatch(addUserMetaData(user));
        console.log('props after action', this.props);
    }
    render() {
        return (
            <View>
                <Text>Welcome to react native</Text>
            </View>
          )
    }
}

const mapStateToProps = state => {
    return { user: state };
};

export default connect(mapStateToProps)(Screen);

Answer 1

Пожалуйста, добавьте state.firestore_doc вместо state, потому что в action.payload редуктора присвойте данные в состоянии firestore_doc, чтобы вы не получали данные из state.user

const mapStateToProps = state => {
    return { user: state.firestore_doc };
};

Answer 2

Исправлено https://snack.expo.io/@janithar/c3RhY2

Линии, которые я изменил

 return { ...state, firestore_doc: action.payload };