react/redux - Fetch API in react-redux app

Question

I'm new with react and redux and I was checking a shopping cart app, what if I want to fetch these dummy objects from an external api. I can fetch apis in react but redux makes it a little confusing for me.

productsReducer.js

const INIT_PRODUCTS = [
    {id:1, title: 'Watch', description: 'Lorem Ipsum', price: 80, img:''},
    {id:2, title: 'Watch', description: 'Lorem Ipsum', price: 50, img:''},
    {id:3, title: 'Watch', description: 'Lorem Ipsum', price: 35, img:''}
];
export default function productsReducer(state=INIT_PRODUCTS, action={}) {

    function findProductIndex(products, id) {
        return products.findIndex((p) => p.id === id)
    }

    return state;
}

did you read the documentation? redux.js.org/advanced/asyncactions — azium
– azium, Commented Sep 1, 2018 at 22:43

yehonatan yehezkel · Accepted Answer · 2018-09-01 22:51:48Z

2

when you use fetch API you do asynchronously action ( call to server is usualy async ) . redux dont support async actions by defualt. so you need to use middleware called 'thunk' or 'redux-saga' ( thunk is easier ) this middleware give you the ability to use redux with async actions.

how thunk work? you create an action creator that return a function instead of acrion creator that return an object. and you pass to this returned function the dispatch function from the store. this give the returned function the ability to call the dispatch asynchronously- as a callback

this is the best guide on this subject

thunk for dummy's

edited Sep 1, 2018 at 22:51

answered Sep 1, 2018 at 22:46

yehonatan yehezkel

1,25420 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react/redux - Fetch API in react-redux app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related