score:1
Accepted answer
In addition to the info lavor gaved, since you use combineReducers, you need to access to state by using your reducer key.
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);
I also made some corrections in the reducer file, we need to return the new state with the given payload.
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;
}
}
And action file:
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;
});
};
}
You can check this codesandbox for the working app.
score:0
You are not dispatching your action, try to do it in componentDidMount (you need to map dispatch to props first):
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);
Source: stackoverflow.com
Related Query
- Redux-Initial Api call Not working from action creator
- React Redux onClick Call to Action Creator Not Working
- Redux - how to call an action creator from inside another action creator?
- Api call not firing up in redux action with debouce
- How to call two APIs inside redux action where one API call depends upon what was returned from the other?
- React/Redux - Passing JSON data from one API call to another Redux action using Thunk
- working with setTimeout function that dispatch an action from redux and resolve a promise chain with fetch call
- React Context API not working from custom NPM component library
- Redux React create initial state from API
- redux action "is not a function" when dispatched from component
- React Redux : Action creator not calling reducer
- Redux Dev Tools not working for large action payload
- Why not dispatch directly into store from action creator redux?
- Redux action dispatch not working
- React redux setting initial state from axios call
- Handling Redux Saga result in view from which action call originates
- Initial state in React with Redux not working
- Redux store not being populated when mocking API call
- What is recommended way to determine if a Redux state empty array is the initial state or the result of an API call that returns an empty array?
- Implementing Twilio Api call from a CURL example to js returns status code of 200 but does not seem to update data
- React is not updating the UI after receiveing data from the API call (using hooks)
- How to migrate api call wrapper from a redux thunk to redux saga
- Redux Thunk + ReactJS: Action creator being called but dispatch function not being called
- "Res.redirect" Not Working when making Ajax call from React to Node?
- How to call functions with API calls in an action using Redux-hooks useDispatch from component?
- How to take parameters from component to redux action creator
- React Hooks and Redux - trouble getting value from action creator
- Fetch API not working with Rails + React from Webpacker
- Redux Thunk Action Creator Not Getting Called
- File Upload from API Routes Next.js not working
More Query from same tag
- Performing loop on js objects and then use map method instead of calling component again and again
- How to pass form data to an api GET request in React
- React history.push not working from the Home component
- react I want to overwrite the value of an object
- How to get row number of "parent" table in React-table from another react table in sub component?
- React - issues with loading an external script
- Handling multiple image upload with React JS & Laravel
- I want to log an action everytime a user clicks (highlights) an input field to enter a value into it. What can I do to achieve such functionality?
- Redux-form: update/change two fields values at once
- Child component changing parent component state
- React and Firebase - cant set the state
- is it possible to mix react jsx with non jsx components?
- How to refresh firebase IdToken with apollo Reactjs client
- I can't define type to set an array of objects in a variable React.useState
- How to properly write types for an array of generic React components and their properties?
- Reactjs @ symbol in parameter: item.enclosure.@attributes how to fix, that this is possible?
- How to return Many "Await" in one Promise
- Map <option> of a materialize css <select> with ReactJS
- Accessing and setting state in an react/flux application
- Webpack not compiling - Module build failed
- How to place glyphicon in bootstrap navbar within a react.js project
- Multiple React versions in a monorepo, is it possible?
- How can i solve this i am able to send msg and receive but it is not one to one messaging socket io react
- How do I validate if a start date is after an end date with Yup?
- ReactJS: Group data by months in the same year
- How to update series on pie chart
- How to wait for an fadeout function to end?
- React Js FormControl control won't toggle checkbox in modal
- Updating state on props change in React Form
- ReactJS - Some element render only after a refresh (F5). Why?