According to the docs you are mixing up the usage of redux-logger You either need to import the specific createLogger function import { createLogger } from ‘redux-logger’ const logger = createLogger({ // …options }); Or use the default import import logger from ‘redux-logger’ And then your code should be fine const store = createStore( reducers, … Read more
I faced the same issue, for me it was just solved by adding AppDispatch to the type of useDispatch hook; const dispatch = useDispatch<AppDispatch>(); useEffect(() => { dispatch(getUsers()); }, []); getUsers() was my createAsyncThunk function
I wrote an extended blog post called Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability, which addresses this topic in detail. In it, I respond to several critiques of thunks and use of getState (including Dan Abramov’s comments in Accessing Redux state in an action creator?). In fact, my post was specifically inspired by … Read more
I think you simply need to add reducers for the additional keys, e.g. function one(state = {}, action) { switch (action.type) { case ONE_UPDATED: return action.one default: return state } } From the docs: If you produced reducer with combineReducers, this must be a plain object with the same shape as the keys passed to … Read more
I’m a Redux maintainer and creator of Redux Toolkit. FWIW, nothing about making async calls with Redux changes with Redux Toolkit. You’d still use an async middleware (typically redux-thunk), fetch data, and dispatch actions with the results. As of Redux Toolkit 1.3, we do have a helper method called createAsyncThunk that generates the action creators … Read more
Here you have an example on how to dispatch and chain async action. https://github.com/gaearon/redux-thunk The thunk middleware knows how to turn thunk async actions into actions, so you just have to have your simple_action() to be a thunk and the thunk middleware will do the job for you, if the middleware see a normal action, … Read more
The Promise approach export default function createUser(params) { const request = axios.post(‘http://www…’, params); return (dispatch) => { function onSuccess(success) { dispatch({ type: CREATE_USER, payload: success }); return success; } function onError(error) { dispatch({ type: ERROR_GENERATED, error }); return error; } request.then(success => onSuccess, error => onError); }; } The async/await approach export default function createUser(params) … Read more
applyMiddleware takes each piece of middleware as a new argument (not an array). So just pass in each piece of middleware you’d like. const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore);
You may use Redux’s mapStateToProps and connect with React’s componentDidUpdate(prevProps, prevState, snapshot) hook. So basically your code could look like this: const mapStateToProps = (state) => ({ specificProperty: state.specificProperty, // any props you need else }); class YourComponent extends React.Component { render() { // render your component } componentDidUpdate(prevProps, prevState, snapshot) { if (prevProps.specificProperty !== … Read more
redux-thunk allows your action creators to return a function : function myAction(payload){ return function(dispatch){ // use dispatch as you please } } redux-promise allows them to return a promise : function myAction(payload){ return new Promise(function(resolve, reject){ resolve(someData); // redux-promise will dispatch someData }); } Both libraries are useful if you need to dispatch action async … Read more