CODEWITHSUNDEEP
reactjsreduxreact-redux
朴野归踪
朴野归踪

Reputation: 11

how to use dispatch in a right way?

here is an example:

export const fetchPosts = (path, postData) => {
    let url = target + path + Tool.paramType(postData);
    return dispatch => {
        dispatch(requestPosts(postData));
        return fetch(url,{
            mode: 'cors',
            "Content-Type": "application/json",
        })
        .then(response => {
            if(response.ok){
                response.json().then(json => dispatch(receivePosts(path, json)))
            }else{
                console.log("status", response.status);
            }
        })
        .catch(error => console.log(error))
    }
}

when I want to request data in my commponent:

this.props.fetchPosts(this.props.seting.url,this.props.seting.data)

however,when I import like this:

import *as action from '../../Redux/Action/Index';
action.fetchPosts(this.props.seting.url,this.props.seting.data)

project seems to start successfully...Is that right?..... =.=

Upvotes: 1

Views: 147

Answers (2)

HolyMoly
HolyMoly

Reputation: 2080

  import { connect } from 'react-redux'
  import { 
    requestPosts, 
    receivePosts 
  } from '../../Redux/Action/Index';

  export const fetchPosts = (path, postData) => {    
    const url = target + path + Tool.paramType( dispatch(requestPosts(postData)) );
    const { dispatch } = props

    return fetch(url, {
        mode: 'cors',
        "Content-Type": "application/json",
    })
    .then(response => {
        if(response.ok){
            response.json().then(json => dispatch(receivePosts(path, json)))
        }else{
            console.log("status", response.status);
        }
    })
    .catch(error => console.log(error))
}

export default connect(componentName);

When you use connect, dispatch automatically becomes available in props so you can invoke it directly by including it in your deconstructing of props. It seems that in your code, you are passing postData to the Tool.paramType before it has been defined, and it is not defined until after the return - I can't say that does not work or does, it just seems like it could fail - so I moved that dispatch directly into where the data is needed when it's needed. The answer above mine is also correct, these are just different ways of using dispatch and I have done both - recently I stopped using mapDispatchToProps once i learned it is already available on props via connect except in cases where I need to bindActionCreators , and that is needed when you are passing dispatch down to a lower level component that has no idea of redux.

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 282120

In order to make fetchPosts available as a prop to your component you need to make use of mapDispatchToProps function and bindActionCreators like

import *as action from '../../Redux/Action/Index';

......
mapDispatchToProps(dispatch) {
     return {
          fetchPosts: bindActionCreators(action.fetchPosts, dispatch);
     }

}

Also you need to make use of connect from redux to bind actions to the component like

export default connect(null, mapDispatchToProps)(componentName);

and this is the correct approach.

Upvotes: 1

Related Questions