Redux-Initial Api call Не работает от создателя действия

Question

Я только что прошел какое-то руководство по избыточности и начал реализовывать

У меня есть один вызов API, который должен произойти из-за избыточности, как только страница загрузится ... это возможно с ComponentDidMount, но мне нужно знать,Как Редукс помогает в достижении этого.

Для удобства я поделился кодом в

• https://codesandbox.io/s/quirky-sunset-s95gu?fontsize=14

Мой index.js взглядкак

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { createStore,applyMiddleware } from "redux";
import allReducer from "./reducers";
import { Provider } from "react-redux";
import thunk from 'redux-thunk';

import "./styles.css";

let store = createStore(
  allReducer,
  applyMiddleware(thunk)
);

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

Мой создатель действий выглядит (action / index.js)

import UserApi from "../UserApi";

export function loadUserSuccess(user) {
  return { type: "LOAD_USER_SUCCESS", user };
}
export function loadUsers() {
  return function(dispatch) {
    return UserApi.getAllUsers()
      .then(user => {
        console.log("midhun");
        dispatch(loadUserSuccess(user));
      })
      .catch(error => {
        throw error;
      });
  };
}

, а его последующая функция api caliing выглядит как

class UserApi {
  static getAllUsers() {
    return fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        console.log("response", response);
        return response.json();
      })
      .catch(error => {
        return error;
      });
  }
}

export default UserApi;

My Reducerвыглядят как

import initialState from "./InitialState";

export default function IsLoggedReducer(state = initialState.user, action) {
  console.log(state, action);
  switch (action.type) {
    case "LOAD_USER_SUCCESS":
      return state;
    default:
      return state;
  }
}

, а мои App.js выглядят как

import React from "react";
import { connect } from "react-redux";
import * as userActions from "./action/index";
import UserList from "./UserList";

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>MYpage</h1>
        <UserList user={this.props.user} />
      </div>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    user: state.user
  };
}

export default connect(mapStateToProps)(App);

Я поместил пару консолей в создатель действий и его последующую функцию, но она не запускается.

Любая помощь будет высоко ценится и будет очень полезна для начинающих

Вы, ребята, можете проверить полный набор кода

https://codesandbox.io/s/quirky-sunset-s95gu?fontsize=14

Answer 1

В дополнение к информации, полученной от lavor, так как вы используете сочетанииReducers, вам нужно получить доступ к состоянию с помощью вашего ключа редуктора.

App.js

import React from "react";
import { connect } from "react-redux";
import {loadUsers} from "./action/index";
import UserList from "./UserList";

class App extends React.Component {

  componentDidMount() {
    this.props.loadUsers();
  }

  render() {
    return (
      <div>
        <h1>MYpage</h1>
        <UserList users={this.props.users} />
      </div>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    users: state.IsLoggedReducer
  };
}

export default connect(mapStateToProps, {loadUsers})(App);

Я также сделал несколькоисправления в файле редуктора, нам нужно вернуть новое состояние с заданной полезной нагрузкой.

import initialState from "./InitialState";

export default function IsLoggedReducer(state = initialState.user, action) {
  console.log("ap", action.payload);
  switch (action.type) {
    case "LOAD_USER_SUCCESS":
      return [...action.payload]
    default:
      return state;
  }
}

И файл действия:

import UserApi from "../UserApi";

export function loadUserSuccess(users) {
  return { type: "LOAD_USER_SUCCESS", payload: users };
}
export function loadUsers() {
  return function(dispatch) {
    return UserApi.getAllUsers()
      .then(users => {
        dispatch(loadUserSuccess(users));
      })
      .catch(error => {
        throw error;
      });
  };
}

Вы можете проверить этот код и окно для работающего приложения.

https://codesandbox.io/s/cranky-colden-v6r6w

Answer 2

Вы не отправляете свое действие, попробуйте сделать это в componentDidMount (вам необходимо сначала сопоставить диспетчерский состав с реквизитом):

App.js

componentDidMount() {
    this.props.loadUsers();
}

// ...

function mapStateToProps(state, ownProps) {
  return {
    user: state.user
  };
}

function mapDispatchToProps(dispatch) {
  return {
    loadUsers: () => dispatch(userActions.loadUsers())
  };
}


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