Comments (6)
@gazpachu In your case, dispatching those actions in componentWillMount
of App
should be sufficient.
from redux-json-api.
roman from Red Badger Team in the React London Slack group, was nice to give me this example. I'm just pasting it for your reference:
// define this inside your helper-module.js
import {
createEntity,
deleteEntity,
readEndpoint,
setAccessToken
setEndpointHost,
setEndpointPath
} from 'redux-json-api';
import { bindActionCreators } from 'redux';
import { API_URL, API_PATH } from '../../constants/constants';
const reduxJsonApiActions = {
createEntity,
deleteEntity,
readEndpoint,
setAccessToken
setEndpointHost,
setEndpointPath,
};
export default (dispatch, customActions) => ({
...bindActionCreators(reduxJsonApiActions, dispatch),
configAPI: token => {
dispatch(setEndpointHost(API_URL));
dispatch(setEndpointPath(API_PATH));
dispatch(setAccessToken(token));
},
readAPI: function (token, endpoint, callback) {
this.configAPI(token, dispatch);
dispatch(readEndpoint(endpoint)).then(function(data) {
callback(data);
});
},
...bindActionCreators(customActions, dispatch),
});
// inside your component.js
import getHelperActions from './helper-module.js';
import { bindActionCreators, connect } from 'redux';
const mapDispatchToProps = dispatch =>
getHelperActions(dispatch, {
yourAction,
yourSecondAction
});
class Cards extends Component {
componentWillMount() {
this.props.readAPI('token', 'http://endpoint', () => console.log('CALLBACK! ☎️'));
}
render() {
...
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Cards);
from redux-json-api.
I am not sure in which context you would need to do this. Could you elaborate on the purpose of doing it this way and how we could support this in redux-json-api?
from redux-json-api.
Abstracting all the API related methods into a Helper module/component would free other components in the app from the repetition of having to call all the time setEndpointHost, setEndpointPath, setAccessToken, setHeader... That's a lot of config required for each API request, thus it's better to write it ONCE in one place rather than everytime we need to make an API request.
Maybe I'm missing something, but considering that in a React app, the order in which components mount is not really known or can be easily arranged, I needed to call all these previously mentioned methods prior to making the API request.
from redux-json-api.
You don't need to dispatch the configuring actions for each API request. The configuration is stored in state and will be used automatically for all requests.
from redux-json-api.
@egeriis And in which file do you usually set the configuration to make sure it runs before any other component?
If I put it in the componentDidMount
of my app.jsx
, that doesn't guarantee that the configuration will be set before any other component. Sometimes the App
component is loaded after a few other components, we cannot change that. It's the way React loads components.
On the other hand, I cannot put it before my index.jsx
file, before the react router
configuration, because the dispatch
method requires a React component, isn't it?:
ReactDOM.render(
<Provider store={store}>
<Router onUpdate={() => window.scrollTo(0, 0), logPageView} history={history}>
<Route path="/" component={App}>
<IndexRoute component={Home} />;
<Route path="/favourites" component={Cards} />
<Route path="/inbox" component={Cards} />
<Route path="/insights" component={Insight} />
<Route path="*" component={NotFound} />
</Route>
</Router>
</Provider>
, document.getElementById('react-root'));
It would help a lot if you specify in the Docs
where is recommended to set the configuration.
from redux-json-api.
Related Issues (20)
- Workwith Immutable.js HOT 1
- Best Practice for 422 or 500 Errors HOT 2
- Could you guys give me an example of using json-redux-api with Axios? HOT 17
- Update hydrateStore doc example
- resource.type vs collection endpoint uris HOT 5
- Add flow-typed
- Update set up configuration page to v2 Standards HOT 8
- Delete resource endpoint appears to use relative pathing HOT 5
- Links to state HOT 5
- Update state at next readEndpoint HOT 3
- Custom URL construction HOT 11
- Action type is undefined HOT 4
- Pagination URLs can be objects.
- Unable to start expo due to Node standard library dependency of keykey HOT 1
- angular @angular-redux process not defined HOT 6
- babel-runtime must be added manually to build
- Media Types (Content Negotiation) for mutlipart/form-data content type. Request for implementation. HOT 1
- Is there any known live fork of this repo? HOT 2
- getRelatedResources crashes if relationship data is null HOT 2
- Export instance of axios that used in requests
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from redux-json-api.