I was just going through some react-redux code online and basically i came across the following set of code , which is basically a js file full of ACTIONS , just to give some context a combination of redux and redux-thunk is being used here:
export const init = () => async dispatch => {
dispatch({ type: TYPES.SET_LOADING });
await dispatch(getConfig());
await dispatch(getGenres());
dispatch({ type: TYPES.REMOVE_LOADING });
};
// Action Creator to get the config object from the API
export const getConfig = () => async dispatch => {
const res = await tmdbAPI.get('/configuration');
dispatch({
type: TYPES.GET_CONFIG,
payload: res.data,
});
};
I am a bit confused as to why is getConfig function is being wrapped inside a dispatch ?
if you don't want, don't wrap that
like this
export const init = () => async dispatch => {
dispatch({ type: TYPES.SET_LOADING });
dispatch(await getConfig());
dispatch({ type: TYPES.REMOVE_LOADING });
};
//this is not using redux-thunk
// Action Creator to get the config object from the API
export const getConfig = async () => {
const res = await tmdbAPI.get('/configuration');
return {
type: TYPES.GET_CONFIG,
payload: res.data,
};
};
Important
but there are so many reasons why wrap the actions by dispatch.
Here is one example.
when you want get multiple data in one action step by step
export const getData = () => async dispatch => {
dispatch({
type: DATA_LOADING_START
});
try {
const res = await tmdbAPI.get('/url1');
dispatch({
type: DATA1_LOADED,
payload: res.data,
});
const res = await tmdbAPI.get('/url2');
dispatch({
type: DATA2_LOADED,
payload: res.data,
});
} catch (err) {
// handle error
}
dispatch({
type: DATA_LOADING_END
});
};
//this is using redux-thunk
#AlexanderSolonik
Question: Why wrap actions by dispatch?
because dispatch() sends the action result to the reducer.
Redux thunks are just redux actions that can perform side effects. So
export const init = () => async dispatch => {
dispatch({ type: TYPES.SET_LOADING });
await dispatch(getConfig());
await dispatch(getGenres());
dispatch({ type: TYPES.REMOVE_LOADING });
};
Is just an async init function which when called performs the steps in a synchronous manner.
The key is that thunks can dispatch other thunks/actions/etc so the init thunk is just dispatching the getConfig() action which is itself async so the next step of the init function won't be performed until the config API call finishes (possibly because some other code depends on it)
Related
I'm trying my first react application with redux, along with Thunk as middle ware. When calling the action from one of the components, the action is hit but the code inside the action return is not executed. I have no clue what I'm missing here. I'm also using Firestore to get the data.
export const getBikeTypes = () => {
console.log('outside return')
return (dispatch, getState, { getFireBase, getFireStore }) => {
console.log('inside return')
const firestore = getFireStore();
firestore.collection('BikeTypes').get()
.then((response) => {
console.log(response)
return response
}).then(() => {
dispatch({ type: 'GET_BIKETYPES' });
}).catch((err) => {
dispatch({ type: 'GET_BIKETYPES_FAIL', err });
})
}
};
I think you should dispatch action with the payload once you get the response.
const firestore = getFireStore();
firestore.collection('BikeTypes').get()
.then((response) => {
dispatch({ type: 'GET_BIKETYPES', payload: response })
})
In the following context how should I handle possible errors:
export async function testAction(data) {
try {
let response = await axios.get(`https://jsonplaceholder.typicode.com/todos/1`);
return {
type: 'TEST_ACTION',
payload: response
}
} catch(err) {
// ???
}
}
// Somewhere in a component:
<Button onClick={ () => dispatch( testAction() ) }>
Test Stuff
</Button>
Or is better to actually dispatch from the component, eg:
refactor action creator:
export async function testAction(data) {
try {
let response = await axios.get(`https://jsonplaceholder.typicode.com/todos/1`);
return response
} catch(err) {
return err
}
}
Somewhere in a component:
const handleTestAction = () => {
testAction().then(r => dispatch( { type: 'TEST_ACTION', payload: r } ) ).catch( // hadnle errors)
}
<Button onClick={ handleTestAction }>
Test Stuff
</Button>
I know the redux style guide recommends using Action Creators for dispatching actions but in this particular case I am calling the action first and then use dispatch. How should I approach it?
You can create another reducer to handle errors.
export async function testAction(data) {
try {
let response = await axios.get(`https://jsonplaceholder.typicode.com/todos/1`);
return {
type: 'TEST_ACTION',
payload: response
}
} catch(err) {
return {
type: 'ERROR',
payload: err
}
}
}
But you cannot do it like above. because the process is asynchronous
You have to use a 'redux-thunk' for that. Once you add it as a middle-ware to your store, you can get the dispatcher in to your action creater, so you can dispatch anything in the test action after you complete.
So your reducer should change to the below one,
export async function testAction(data) {
return (dispatch) => {
try {
let response = await
axios.get(`https://jsonplaceholder.typicode.com/todos/1`);
dispatch({
type: 'TEST_ACTION',
payload: response
})
} catch(err) {
dispatch({
type: 'ERR',
payload: response
})
}
}
}
UPDATE
Once you connect the middleware, you can use dispatch in the action creater,
const store = createStore(
reducers,
{},
applyMiddleware(thunk)
);
You need to only add the thunk to the store just like above.
You can make it more clear by refactor your code like below
export const testAction = () => async (dispatch) => {
try {
let response = await axios.get(`https://jsonplaceholder.typicode.com/todos/1`);
dispatch({
type: 'TEST_ACTION',
payload: response
})
} catch(err) {
dispatch({
type: 'ERR',
payload: response
})
}
}
If your API is going to change in dev and prod modes, You can use below way,
Somewhere in your application,
const axiosInstatnce = axios.create({
baseURL: "https://jsonplaceholder.typicode.com",
headers: {/* you can set any header here */}
});
Now when you create store,
const store = createStore(
reducers,
{},
applyMiddleware(thunk.withExtraArgument(axiosInstatnce))
);
Now you can get the axiosInstance as the third argument of the function you return from the testAction. 2nd argument gives the current state.
export const testAction = () => async (dispatch, state, api) => {
try {
let response = await api.get(`/todos/1`);
dispatch({
type: 'TEST_ACTION',
payload: response
})
} catch(err) {
dispatch({
type: 'ERR',
payload: response
})
}
}
Now in your component,
import {testAction} from '../path/to/actions'
const dispatch = useDispatch()
dispatch(testAction())
If you want to write async code in an action creator, you need to write an async action creator. Regular action creators return an object whereas async action creators return a function instead of an object.
export function testAction(data) {
return async function(dispatch) {
// async code
}
}
Inside the function returned by an async action creator, you have access to dispatch which can be used to dispatch any success action in case of successful response from server and in case of error, you can dispatch an action indicating that an error has occurred.
export function testAction(data) {
return async function (dispatch) {
try {
let response = await axios.get(`https://jsonplaceholder.typicode.com/todos/1`);
dispatch({
type: 'TEST_ACTION',
payload: response
});
} catch(err) {
dispatch({type: 'TEST_ACTION_ERROR', message: 'error occurred'});
}
}
}
You also need to use redux-thunk middleware if you have async action creators in your code. This middleware allows action creators to return a function.
For complete details about how to create async action creators and how to setup redux-thunk middleware to make async creators work, take a look at Async Actions
Hi I am trying to pass a parameter for the post method in an api call in a redux thunk middleware. But this is not invoking an action. Could someone have a look at the code and tell what mistake i am doing:
import API from "../../_metronic/utils/api";
let FetchActions = async (id,dispatch) => {
await API.post("companies/",id)
.then(res => dispatch({ type: "FETCH_COMPANIES", payload: res.data }))
.catch(err => console.log(err));
};
export default FetchActions;
I am getting the following error:
TypeError: dispatch is not a function
at fetchAction.js:6
import API from "../../_metronic/utils/api";
let FetchActions = id => async (dispatch, getState) => {
await API.post("companies/",id)
.then((res) => {
dispatch({ type: "FETCH_COMPANIES", payload: res.data })
})
.catch((err) => {
console.log(err)
});
};
export default FetchActions;
You are doing wrong with the syntax as redux-thunk needs a callback function to return from the method.
Another thing is if you are using await you don't need to have .then and .catch, instead, you should wrap this code in the try-catch block.
The below code should work for you.
import API from "../../_metronic/utils/api";
let FetchActions = async (id) => {
return async (dispatch, getState) => {
try {
const res = await API.post("companies/",id);
dispatch({ type: "FETCH_COMPANIES", payload: res.data })
} catch(err) {
console.log(err)
}
}
};
export default FetchActions;
Read more about the action creators in redux-thunk here.
I'm writing a function to send API requests. When I get the response from that API I want to dispatch redux action if the user has called my function in dispatch or just do nothing if not. I'm using redux thunk.
Right now I've written two separate methods for this.
This does not dispatch after getting the response from the API, just return the Promise.
const getAnimalsList = () => return axios.request({url: 'api.domain.com/animals'});
This function will be called as usual functions.
It dispatches an action something after getting a response from the API
const getAnimalsList = () => (dispatch, getState) => {
axios.request({url: 'api.domain.com/animals'}).then(
res => dispatch({type: 'RESPONSE RECEIVED', data: res}),
err => dispatch({type: 'ERROR', err})
);
}
This function will be called inside dispatch as dispatch(getAnimalsList())
Now what I want is to know in a single function whether it was called inside the dispatch or just called normally.
example:
const getAnimalsLis = () => {
let prom = axios.reques({url: 'api.domain.com/animals});
if(function_is_called_inside_dispatch){
return dispatch => {
prom.then(
res => dispatch({type: 'RESPONSE RECEIVED', data: res}),
err => dispatch({type: 'ERROR', err})
);
}
}
else return prom;
}
This is a wrong way to do things. There's no way to detect that the function was called like dispatch(getAnimalsList()) or just getAnimalsList(). Due to operator precedence, it has already been called as getAnimalsList() when an action provided to dispatch. The only way would be to call it differently, dispatch(getAnimalsList(CALLED_AS_AN_ACTION)).
A correct way is to not mix functions that serve different purposes. The code can be made DRYer than it is, getAnimalsList function already contains common code that could be extracted otherwise:
const getAnimalsList = () => return axios.request({url: 'api.domain.com/animals'});
const getAnimalsListAction = () => (dispatch, getState) => {
return getAnimalsList().then(
res => dispatch({type: 'RESPONSE RECEIVED', data: res}),
err => dispatch({type: 'ERROR', err})
);
}
Please do not define getState if you are not planning on using it:
const getAnimalsList = () => (dispatch, getState) => {
axios.request({url: 'api.domain.com/animals'}).then(
res => dispatch({type: 'RESPONSE RECEIVED', data: res}),
err => dispatch({type: 'ERROR', err})
);
}
And also use the async/await syntax, its more explicit for you as to what is going on:
export const getAnimalsList = () => async dispatch => {
const response = await jsonAnimals.get("/animals");
dispatch({ type: "RESPONSE_RECEIVED", payload: response.data });
};
Then create a folder/file system like so: apis/jsonAnimals.js:
Place your Axios code in there:
import axios from 'axios';
export default axios.create({
baseURL: 'http://api.domain.com'
});
Okay, now you have a nice clean Redux application, makes it easier on the eyes, easier to debug.
Now if you want to test it in the console then you could do
export const testGetAnimalsList = () => async (dispatch, getState) => {
await dispatch(getAnimalsList());
console.log(getState().animals);
};
export const getAnimalsList = () => async dispatch => {
const response = await jsonAnimals.get("/animals");
dispatch({ type: "RESPONSE_RECEIVED", payload: response.data });
};
Let's assume I have a component called BookOverview that displays details of a book.
I'm getting data with an action:
componentDidMount() {
this.props.getBook(areaId);
}
And then I get the data with axios:
export const getBook = () => async dispatch => {
const res = await axios.get(
`${API}/${ENDPOINT}`
);
dispatch({
type: GET_BOOK,
payload: res.data
});
};
How shall I change this code to:
if redux store already have the book loaded - return it
if no book is present in the store - call the relevant API?
What is the best practise to achieve that please?
You can have the getState inside your async action creator like this:
export const getBook = () => async (dispatch, getState) => {
if(!getState().book /* check if book not present */) {
const res = await axios.get(
`${API}/${ENDPOINT}`
);
dispatch({
type: GET_BOOK,
payload: res.data
});
} else {
dispatch({
type: GET_BOOK,
payload: getState().book
});
}
};
For More Async Actions-Redux
You can try it this way:
componentDidMount() {
if(this.props.book==null){
this.props.getBook(areaId);
}
}
I assumed that you have a property called book in your props. that populates from the particular reducer.
You have to subscribe the particular reducer to get the this.props.book - This gives the value that you have in your store.