Reputation: 117
I'm trying to implement redux in my react project but I can't seem to fix this problem I came across. When I click on a submit button I'm firing off a dispatch action to my reducer which in this case should set the prop "loading" to true. I know that the action is getting called correctly because it logs to the console when the action is called but there are no logs from the reducers (I've coded the reducer to log when it is called). I can, however, see previous reducers getting called in the setup (init calls and etc.) This is my reducer code which I'm currently using:
import { ADD_PRODUCT_STARTED, ADD_PRODUCT_SUCCESS, ADD_PRODUCT_FAILURE } from '../actions/types'
const initialState = {
products: [
{
name: 'Friends t-shirt',
price: '50',
img: 'https://static.bershka.net/4/photos2/2019/I/0/1/p/7337/058/250/7337058250_1_1_3.jpg',
id: 1
},
{
name: 'Computer',
price: '50',
img: 'https://cdn.def-shop.com/cdn-cgi/image/w=530,q=95,f=auto/images/product_images/picture1300x1725_images/619532_0.jpg',
id: 2
},
{
name: 'IPhone',
price: '50',
img: 'https://cdn.def-shop.com/cdn-cgi/image/w=530,q=95,f=auto/images/product_images/picture1300x1725_images/619532_0.jpg',
id: 3
}
],
loading: false,
error: null
};
const productsReducer = (state = initialState, action) => {
console.log(action.type, ADD_PRODUCT_STARTED)
switch (action.type) {
case ADD_PRODUCT_STARTED:
console.log('Reducing started...')
return {
...state,
loading: true
};
case ADD_PRODUCT_SUCCESS:
return {
...state,
loading: false,
error: null,
todos: [...state.todos, action.payload]
};
case ADD_PRODUCT_FAILURE:
return {
...state,
loading: false,
error: action.payload.error
};
default:
return state;
}
}
export default productsReducer
And this is the action code
import { ADD_PRODUCT_STARTED, ADD_PRODUCT_SUCCESS, ADD_PRODUCT_FAILURE } from './types'
const addProduct = (name, price) => {
return dispatch => {
console.log('Dispatching action...')
dispatch(addProductStarted)
console.log(`Action dispatched: ${addProductStarted}`)
// Perform actions here then: .then() => dispatch(addProductSuccess) and .catch() => dispatch(addProductFailure)
}
}
const addProductStarted = () => {
return {
type: ADD_PRODUCT_STARTED
}
}
const addProductSuccess = (product) => {
return {
type: ADD_PRODUCT_STARTED,
payload: {
...product
}
}
}
const addProductFailure= (err) => {
return {
type: ADD_PRODUCT_STARTED,
payload: {
...err
}
}
}
if(ADD_PRODUCT_SUCCESS && ADD_PRODUCT_FAILURE && addProductSuccess && addProductFailure){
console.log('Ignore thihihi')
}
export default addProduct
Thank you for any help because I'm really struggling with this!
Upvotes: 3
Views: 703
Reputation: 67627
You are not actually dispatching the action.
This line is wrong:
dispatch(addProductStarted)
Remember that dispatching involves passing an action object to dispatch
, like:
dispatch({type: "increment"})
We commonly use action creator functions to generate those action objects. That means you have to call the action creator to get the action object:
const action = increment();
dispatch(action);
You're not calling the action creator. You're passing it directly.
The right syntax is:
dispatch(addProductStarted())
Upvotes: 3