codebelt / react-redux-architecture Goto Github PK

View Code? Open in Web Editor NEW

186.0 13.0 66.0 6.33 MB

Learn how to architect a React Redux application in a classy way

Home Page: https://medium.com/@robertsavian/my-awesome-react-redux-structure-6044e5007e22

JavaScript 87.67% HTML 2.21% CSS 2.25% TypeScript 7.86%

react redux redux-thunk typescript scss reselect craco javascript

react-redux-architecture's People

Contributors

Stargazers

Watchers

react-redux-architecture's Issues

Add PropTypes

[Question] How to make post request

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]));

[Question] Testing best practices

Could you possibly write a test for one of your actions that we could use as a guide? I am new to javascript/testing and am having trouble with the effects not being able to import environment module.

[Question] How RequestingReducer is accessed

The RequestingReducer is a bit different from how I'm used to seeing Reducers being implemented, and I'm also not so experienced with React. If you don't mind, I would like to ask: how the RequestingReducer is accessed without a dispatch call? I understand the logic to determine if a request is finished or not, but when the store is set with ShowsAction.REQUEST_SHOW: true for instance?

Add JSDocs for JavaScript branch

Github Pages

https://github.com/gitname/react-gh-pages

I have a problem this line

react-redux-architecture/src/stores/error/ErrorReducer.ts

Line 22 in 44631e3

newState[key] = value;

my problem:
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'.

[Question] Organizate the reduce state by normalization

in the documentation of redux, the say normalize the state is better than have a nested state

this is an example of one state normalized from documentation of redux


{
  users: {
    ids: ["user1", "user2", "user3"],
    entities: {
      "user1": {id: "user1", firstName, lastName},
      "user2": {id: "user2", firstName, lastName},
      "user3": {id: "user3", firstName, lastName},
    }
  }
}

Your showRrducer can change the state and have a normalized state like this

Before

  initialState = {
    currentShowId: '74',
    show: null,
    episodes: [],
    actors: [],
  };

After


  initialState = {
    currentShowId: '74',
    show: null,
    episodes: 
    {
          episodesId: [],
          entities: []
    },
    actors:
   {
          actorsId: [],
          entities: []
   },
  };

The redux documentation says this is better for search an element in the array on the state like this

const actorId= 'actor1'
const actorObject = state.actors.entities[actorId]

to achieve something like this redux documentation recommend using normalizr i think this can help to this redux architecture to be better.

another personal question that i have is when we call an API that by default have a filter system and pagination and we want to show the most rating shows and the most popular shows, putting your action request show like example we can change like this

  static requestShow(FILTERS) {
    return async (dispatch, getState) => 
   {
      await ActionUtility.createThunkEffect(dispatch, ShowsAction.REQUEST_SHOW, ShowsEffect.requestShow, FILTERS);
    };
  }

And when we run another time dispatch we pass the arguments like this

 componentDidMount() {
    this.props.dispatch(ShowsAction.requestEpisodes({ page: 1, limit: 5, filter: 'popular' }));
    this.props.dispatch(ShowsAction.requestEpisodes({ page: 1, limit: 5, filter: 'rating' }));
  }

but we have a problem if we want to store the popular and the most rating shows if we call the tow dispatch we rewrite the state and we only have the first action dispatched

I found a solution to make two action functions and then in the reducer when these actions finished store the state in the different arrays, like this:

  static requestRatingShow(FILTERS) {
    return async (dispatch, getState) => 
   {
      await ActionUtility.createThunkEffect(dispatch, ShowsAction.REQUEST_SHOW, ShowsEffect.requestShow, FILTERS);
    };
  }

  static requestPopularShow(FILTERS) {
    return async (dispatch, getState) => 
   {
      await ActionUtility.createThunkEffect(dispatch, ShowsAction.REQUEST_SHOW, ShowsEffect.requestShow, FILTERS);
    };
  }

  [ShowsAction.REQUEST_SHOW_POPULAR_FINISHED](state, action) {
    return {
      ...state,
      showPopular: action.payload,
    };
  }

  [ShowsAction.REQUEST_SHOW_RATING_FINISHED](state, action) {
    return {
      ...state,
      showRating: action.payload,
    };
  }

but I think this is not the best way to do this so what other implementation of this can be done ?

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

I am getting an error, not sure what is wrong.
Can sb help?

>node --version
v13.9.0

>npm --version
6.14.1

>npm start

> [email protected] start f:\GIT\react-redux-architecture
> cross-env CLIENT_ENV=development craco start

Starting the development server...

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:118:11)
    at Object.join (path.js:375:7)
    at noopServiceWorkerMiddleware (f:\GIT\react-redux-architecture\node_modules\react-dev-utils\noopServiceWorkerMiddleware.js:14:26)
    at Layer.handle [as handle_request] (f:\GIT\react-redux-architecture\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (f:\GIT\react-redux-architecture\node_modules\express\lib\router\index.js:317:13)
    at f:\GIT\react-redux-architecture\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (f:\GIT\react-redux-architecture\node_modules\express\lib\router\index.js:335:12)
    at next (f:\GIT\react-redux-architecture\node_modules\express\lib\router\index.js:275:10)
    at launchEditorMiddleware (f:\GIT\react-redux-architecture\node_modules\react-dev-utils\errorOverlayMiddleware.js:20:7)
    at Layer.handle [as handle_request] (f:\GIT\react-redux-architecture\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (f:\GIT\react-redux-architecture\node_modules\express\lib\router\index.js:317:13)
    at f:\GIT\react-redux-architecture\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (f:\GIT\react-redux-architecture\node_modules\express\lib\router\index.js:335:12)
    at next (f:\GIT\react-redux-architecture\node_modules\express\lib\router\index.js:275:10)
    at handleWebpackInternalMiddleware (f:\GIT\react-redux-architecture\node_modules\react-dev-utils\evalSourceMapMiddleware.js:42:7)
    at Layer.handle [as handle_request] (f:\GIT\react-redux-architecture\node_modules\express\lib\router\layer.js:95:5)

codebelt / react-redux-architecture Goto Github PK

react-redux-architecture's People

Contributors

Stargazers

Watchers

Forkers

react-redux-architecture's Issues

Add PropTypes

[Question] How to make post request

[Question] Testing best practices

[Question] How RequestingReducer is accessed

Add JSDocs for JavaScript branch

Github Pages

I have a problem this line

[Question] Organizate the reduce state by normalization

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent