React-redux: mapStateToProps () не запускается

Question

Я пытаюсь написать код для выполнения следующих действий в реагировать и реагировать:

1. Пользователь входит в систему, используя форму входа, используя электронную почту и пароль.

2. Если информация верна, запросите информацию о пользователе (имя пользователя, изображение профиля и т. Д. c.) Из базы данных и сохраните ее в объекте Javascript.

3. Запустите действие, чтобы отправить объект в редуктор.

4. Редуктор кладет объект в магазин.

5. После обновления хранилища верните имя пользователя и отобразите его на странице входа.

Я написал приведенные ниже коды и, используя console.log, вижу, что все шаги до # 3 работают нормально. Тем не менее, имя пользователя не возвращается на исходную страницу. Я использовал mapStateToProps (), и когда я вошел в консоль, он вообще не вызывается. Возможно, это связано с тем, что хранилище на самом деле не обновляется, или потому что что-то не так с реализацией mapStateToProps (). Может кто-нибудь взглянуть на приведенные ниже коды и помочь мне?

Ниже приведены коды:

Вход. js

import React from 'react';
import './App.css';
import * as firebase from 'firebase';
import {connect} from 'react-redux';
import {actionCreators} from './Store';

let userinfo={}; //To save the info queried by the 'signin' function

const signin = () => {  
    /*
    Code for querying data from Database. Works fine.
    */
            actionCreators.login(userinfo); // After the query is done, trigger the action to update the store. This one works fine too
 }

function Signin(props) {
    return (
    <div>
     /*
     Component description for signin form
     */
        <button className="login_button" id ="lib" onClick={signin}>Sign in</button>
        <div>
           Hello, {props.username}! 
        </div>
    </div>  
    )
}

function mapDispatchToProps(dispatch,userinfo) {
    return {
        login: () => dispatch(actionCreators.login(userinfo))
    }
}

function mapStateToProps(state) {
    return { 
        username: state.username 
    };
}

export default connect(mapStateToProps,mapDispatchToProps)(Signin);

Магазин. js // Я знаю, что этот код должен быть разделен в конце концов. Просто для проверки работоспособности логика c.

import {createStore} from 'redux';

const loggedIn="loggedIn";

const login=(obj)=>{
    return {
        type:loggedIn,
        payload:obj
    }
}

const reducer=(state={},action) => {
    switch(action.type){
        case loggedIn:
            return Object.assign({},state, action.payload);
        default:
            return state;
    }
};

const store=createStore(reducer);

export const actionCreators = {
    login,
};

export default store;

Заранее большое спасибо !!!

Answer 1

actionCreators.login(userinfo); // After the query is done, trigger the action to update the store. This one works fine too

Это не отправляет действие. Это просто создание действия, а затем ничего не делать с ним. Чтобы ваши редукторы были вызваны, вам нужно отправить действие.

Вы уже используете mapDispatchToProps для создания реквизита входа в систему, поэтому вам нужно будет его использовать. Мне кажется странным, что вы создали дополнительную signin функцию вне компонента, но так как этот код был опущен, я не могу предложить вам альтернативные способы сделать это. Поэтому, если вам нужно сохранить эту функцию signin, вам нужно сделать два вызова: один на signin, один на props.login:

<button className="login_button" id ="lib" onClick={() => {
  signin();
  props.login(userinfo);
}}>Sign in</button>

Answer 2

попробуйте так:

const mapStateToProps = (state, ownProps) => ({ username: state.username });

попробуйте использовать концепции ES в реакции.