Thread

Dec 11, 2017

React-Redux VS 2017 template

Hi I'm new to react/redux. I started playing around with the React-Redux template in Visual Studio 2017. I want to load a left navigation that is common to the UI. The left navigation needs to call an API to populate. I don't really want to include it in {this.props.children}. What's the best way to do this in react-redux?

#reactjs #redux #javascript #visual-studio #template

Responses(1)

stuff ;)

Dec 11, 2017

this is a so called "sideffect". there is

* redux-thunk

besides that's based on your component architecture there are different approaches.

you could for example create a closure

const async DoApiCall(param) {
   await doMyPromiseThing.then((responseData) => { return responseData; })
}

that assign it to an internal state of the component. if you use redux usually you should assign it to a store but that means middle ware and event interceptions.

aka sideeffects. I personally use saga but you could use redux observable as well.

Dec 11, 2017

Thanks! Question, I'm a little confused or may not be understanding the lifecycle completely. I added the async/await in componentDidMount as I wanted the render the result of my fetch. However, it was never triggered. That said, if I put the async call in componentWillMount, it invoked my api twice (server/client) but since componentWillMount does not do re-render it doesn't do anything. Am I missing anything. Is there anything I need to do in the redux-store or boot-server to enable componentDidMount? I apologize if I'm not making sense.

AJ Capistrano componentWillMount is only triggered the first them the component is "mounted" so it should only trigger than.

the async await should use "setState inside", everytime you set the state it will retrigger otherwise nothing will happen.

you can ofc do it from the outside but than you should dispatch an action to the store so the "props change" will trigger a rerender.

Search Hashnode

React-Redux VS 2017 template

Responses(1)

Recent threads