redux-thunk

I am quite new to JavaScript and react-native and I have existing project that I need to add functionality to. It is using redux and redux-thunk with redux-saga to send API requests. Currently it supports only 1 dispatch function per component and I need to dispatch several types of requests to the saga. I am trying to bindActionCreators to add the dispatch to the stores but to no avail.. I am totally lost on the mapDispatchToProps part and how do I "fire the action" afterwards.. in single dispatch to props, I did this: let sdtp = (arg) => { return (dispatch) => { dispatch({ type: 'GET_TEST

I'm trying to figure out how and where to load the data (ie call dispatch on my action) for my select box in react + redux + thunk. I'm not sure if it should go in the constructor of my App container, or should i load it inside my component (in my example: "MyDropdown") My main App: import MyDropdown from '../components/mydropdown'; // Should i import my action here and then... // import { loadData } from '../actions'; class App extends Component { render() { return ( <div className="page-content"> <div className="option-bar"> // SEND it as a PROP inside MyDropdown... <MyDropdown /> </div> <

I have a React app connected to Firebase, i want to check if user is logged in at every page refresh, dispatching IS_SIGNED_IN action, here's the action creator: export function checkAuth() { return dispatch => { firebaseAuth().onAuthStateChanged((user) => { if (user) { dispatch(signedInAction()) } else { dispatch(signedOutAction()) } }) } } Inside the reducer i just make boolean isAuthenticated to true/false: case ActionTypes.isSignedIn: { return Object.assign({}, state, { isAuthenticated: true }) } case ActionTypes.isSignedOut: { return Object.assign({}, state, { isAuthenticated: false }) }

I use thunk middleware and pass initial state to React, but the problem is that React state is not saved when I visit other links. After successfully logged in, it's supposed to render dashboard. User must be redirected to dashboard(which is the root path, / ) when he tries to go to /login page. Should i use redux-router too? I omitted some of code, but it almost looks like below. init.js I passed store to Provider import { Provider } from 'react-redux'; import configureStore from './store/configureStore'; const store = configureStore(); function requireAuth(nextState, replace) { const

So I have wasted 5 hours on this. I have a redux thunk action like this: export const fetchUser = () => async (getState, dispatch) => { if (getIsFetching(getState().user)) { return Promise.resolve(); } dispatch(fetchUserRequest()); try { const response = await api.fetchUser(); dispatch(fetchUserSuccess({ userObject: { ...response } })); } catch (error) { dispatch(fetchUserFailure({ message: "Could not fetch user profile." })); } }; Calling this always ended up in "Actions must be plain objects. Use custom middleware for async actions.]". Yeah, sure. I'm already using redux-thunk for that, why

Is it possible to return promise/signal from action creator, resolved when Redux thunk has successfully dispatched certain action? Consider this action creator: function doPost(data) { return (dispatch) => { dispatch({type: POST_LOADING}); Source.doPost() // async http operation .then(response => { dispatch({type: POST_SUCCESS, payload: response}) }) .catch(errorMessage => { dispatch({type: POST_ERROR, payload: errorMessage}) }); } } I want to call some function asynchronously in the component after calling doPost action creator when Redux has either dispatched POST_SUCCESS or POST_ERROR

I am building a React/Redux app using the redux-thunk middleware to create and handle Ajax requests. I have a particular thunk that is fired pretty often, and I would like to cancel any previously started Ajax requests before firing a new one. Is this possible? One approach would be to mark those requests as canceled by giving them random id and checking its status before handling the result. The way to do this is to assign random id for this call in your first dispatch (inside the thunk) and check it in the reducer before handling the result. const actionId = Math.random(); dispatch({type: