Skip to content
This repository was archived by the owner on Dec 9, 2021. It is now read-only.
This repository was archived by the owner on Dec 9, 2021. It is now read-only.

[Question] How to make post request #44

@TheElegantCoding

Description

@TheElegantCoding

I use this arquicteture of redux in my projects and is awesome, but how you handle the post, update or delete request.

when you do a post request and need when is complete, the state by default is false because is not dispatching any action so you don't know when the status of the post request is 'idle' or is 'success for example:

const PostIsLoading = useSelector((state) => SelectRequesting(state, [PostAction.REQUEST_POST]));

    const PostandClose = () =>
    {
        dispatch(PostAction.PostSomething());
    }

    if(!PostIsLoading )
    {
          // do something when post end
    }

so by default this if condition is true because is not loading and will trigger by default, I suggest adding an 'idle' state so we can know the post action is idle and when is 'success'


    if(PostIsLoading  === 'Idle')
    {
          // Here the action is idle and is dispatch anything
    }

    if(PostIsLoading  === 'loading')
    {
          // Here the action is loading
    }

    if(PostIsLoading  === 'Success')
    {
          // do something when post end
    }

i don't know too much of redux so sorry if there is another way to do this easier

There is another question whit this problem, how this structure is done i think we can pass diferrent actions to the selector like this

const PostIsLoading = useSelector((state) => SelectRequesting(state, [PostAction.REQUEST_POST, PostAction_2.REQUEST_POST_2]));

this doesn't make any error but if we put a button that dispatch the second action, this makes the loading of the first action 'true', for example


const Category = useSelector((state) => state.CategoryReducer.Category);
const Country = useSelector((state) => state.CountryReducer.Country);
const PostIsLoading = useSelector((state) => SelectRequesting(state, [PostAction.REQUEST_POST, PostAction_2.REQUEST_POST_2]));


    useEffect(() =>
    {
        dispatch(PostAction.PostSomething());
    }, [dispatch])

    const Post_2 = () =>
    {
        dispatch(PostAction_2.PostSomething_2());
    }

    return (  
        <>
              {
                  PostIsLoading 
                  ?
                  <h1>Loading bro</h1>
                  :
                  <h1>{Category[0]?.Category}</h1>
              }
              {
                   PostIsLoading 
                    ?
                    <h1>Loading bro</h1>
                    :
                    <h1>{Country[0]?.Country}</h1>
              }
              <button onClick={Post_2 }> post me</button>
        </>
)

When you click to dispatch the action make all load even if the first action on the useEffect is finished, this doesn't trigger the action but the loading doesn't work properly and render for both of them, the easy solution is to make two variables, but I think this lose sense because we pass an array and all the time will contain only one element

const PostIsLoading = useSelector((state) => SelectRequesting(state, [PostAction.REQUEST_POST,]));
const Post_2IsLoading = useSelector((state) => SelectRequesting(state, [PostAction_2.REQUEST_POST_2]));

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions