React Redux не обновляет интерфейс

Question

React-Redux не обновляет интерфейс при изменении магазина.

Я ожидаю, что {this.props.isLogged} будет динамически изменяться при нажатии Изменить кнопку .

Я искал тонны материалов, но я не может найти, почему текст не изменяется при нажатии кнопки.

Индекс. js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { createStore } from "redux";
import reducers from "./reducers";
import { Provider } from "react-redux";

const store = createStore(
  reducers);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Приложение. js

import React from "react";
import { connect } from "react-redux";
import { loginUser } from "./actions";

class App extends React.Component {
  changeText = () => {
    this.props.loginUser();
  };
  render() {
    return (
      <div>
        <span>{this.props.isLogged}</span>
        <button onClick={this.changeText}>Change</button>
      </div>
    );
  }
}

const mapStateToProps = (state /*, ownProps*/) => {
  return {
    isLogged: state.isLogged
  };
};

const mapDispatchToProps = { loginUser };

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

. / Срк / редукторы / индекс. js

import { combineReducers } from "redux";
import { LOGIN_USER } from "../actions";

function userReducer(state = { isLogged: false }, action) {
  switch (action.type) {
    case LOGIN_USER:
      return { isLogged: !state.isLogged };
    default:
      return state;
  }
}

const reducers = combineReducers({
  userReducer
});

export default reducers;

. / Срк / действия / индекс. js

export const LOGIN_USER = "LOGIN_USER";
export function loginUser(text) {
  return { type: LOGIN_USER };
}

Answer 1

Проверьте это .. https://codesandbox.io/s/react-redux-doesnt-update-ui-vj3eh

const reducers = combineReducers({
  userReducer //It is actually userReducer: userReducer
});

Когда вы присваиваете UserReducer для userReducer prop, вы должны будете извлечь то же самое в mapStateToProps

const mapStateToProps = (state /*, ownProps*/) => {
  return {
    isLogged: state.userReducer.isLogged
  };
};

Кроме того, isLogged prop - логическая переменная .. Так что вам придется использовать toString ().

<span>{this.props.isLogged.toString()}</span>

Answer 2

Поскольку вы используете combineReducers, логическое значение isLogged живет в state.userReducer.isLogged.

Рассмотрите возможность изменения combineReducers на combineReducers({ user: userReducer }) и доступа к флагу с помощью state.user.isLogged.