viniciusdacal / redux-arc Goto Github PK
View Code? Open in Web Editor NEWA declarative way to make request with redux actions
Home Page: http://redux-arc.js.org
License: MIT License
A declarative way to make request with redux actions
Home Page: http://redux-arc.js.org
License: MIT License
Is there a sensible way to do this?
I'm calling an api endpoint which returns two sets of data which need to be handled by separate reducers, is there a better way to do it than to listen to the RESPONSE action type
in both reducers?
We need to add a description explaining that and also add a warning in the lib in case someone is using a policy that wasn't imported
What would be the best way to cancel an api request if we already have the data in the store?
Something similar to the shouldFetchPosts
method here https://redux.js.org/advanced/async-actions#actions.js-(with-fetch)
Having the types objects and knowing the action format, we can easily create the reducers.
Points to evaluate: Do we add this in the same package or create another one for it?
Environment:
"expo": "^27.0.1",
"native-base": "^2.7.0",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-native-odoo": "^0.5.0",
"react-native-side-menu": "^1.1.3",
"react-native-table-component": "^1.1.8",
"react-navigation": "^2.6.2",
"react-navigation-redux-helpers": "^2.0.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-arc": "^0.7.3",
"redux-thunk": "^2.3.0",
"rnpm": "^1.9.0",
"xmldom": "^0.1.27"
I'm developing a React Native Expo app. It've set the Strict Mode (Expo do it as default).
In this scenario when fsaActionCreatorFactory.js try to execute the following code:
...
Object.defineProperty(actionCreator, 'name', {
value: type + ' action creator',
writable: false
});
...
the error on the attached image is printed out.
.
The property name of the function actionCreator
is set as read only
. In this way we are trying to force a "set value" and this is forbidden.
If I run the app in debug mode (with Strict Mode deactivated) it works fine!
Hi,
At work we're successfully using this library in both a React and React Native project and it saved us a ton of boilerplate code (perhaps you remember me since the previous compilation issue with react native :-) ).
We're now at the point where we'd like to have a way to set optional query parameters in GET requests to tell our backend how to filter data.
Example:
To my knowledge, the library provides the current options to make a GET request to an example resource ( I added a possible back end expected response on the right based on our current back end behaviour)
Request | BE response |
---|---|
GET resource/ |
all exams |
GET resource/:customParameter |
single resource based on customParameter (like id ) |
I'd like to have a way to add query parameters to the get request, such as:
Request | BE response |
---|---|
GET resource/?exampleFilter=:someCustomFIlter |
n resources based on exampleFilter parameter (exampleFilter could be any parameter name and should be parametrized in some way as well as the payload) |
We went on with this by duplicating and dispatching different custom actions (each one for every possible query params, since we only have like 3 or 4 combinations and just in some specific cases).
Is there a "smarter" way to do this?
Am I missing something?
Thank you very much, and again, kudos for the great work on this library.
Is there a way to merge the payload passed to the action creator with the defaults provided in createActions
?
I have the following createActions
:
export const { creators, types } = createActions('posts', {
...
list: {
url: '/posts/retrieve',
method: 'get',
payload: {
'options[next]': 0,
'options[limiter]': 0,
'options[size]': 10,
'filter[mode]': 'archive'
}
}
...
})
which is called from:
const mapDispatchToProps = (dispatch) => {
const payload = {
'options[next]': 0,
'options[limiter]': 0,
'options[size]': 10,
'filter[mode]': 'drafts'
}
return {
fetchData: () => { dispatch(posts.list(payload)) }
}
}
but it would be nice if we could do:
const mapDispatchToProps = (dispatch) => {
const payload = {
'filter[mode]': 'drafts'
}
return {
fetchData: () => { dispatch(posts.list(payload)) }
}
}
and the payload would get merged with the defaults
As stated in the title I can't find any type definition to use this lib with typescript.
At the moment I added the
// @ts-ignore
comment before the import but it's only a workaround.
Any suggestion?
Me again....
Many of the api endpoints in our application require a profileId
in the url, eg:
/articles/:profileId/:id
The profileId
is stored in the state and previously, when using redux-saga (which we are replacing with redux-arc ๐) we could get it before making the api call.
Is there a smart way of doing this with redux-arc?
We could intercept the api call with a middleware and detect the :profileId
in the url with regex and replace it with the item from the state?
Currently we are getting it in mapStateToProps
then passing down to the component then back up to mapDispatchToProps
via event handlers which feels a bit messy
Is there a way to add global middlewares to every request?
I want to add a token
string to every request (if there currently is one), at the moment i'd have to do something like this on every creator
const { types, creators } = createActions('posts', {
list: {
url: 'posts',
method: 'get',
middlewares: [addTokenMiddleware],
},
})
Also, do we have access to the redux state from middlewares? I'd like the get the token from the state and add it if it exists
in the documentation have the example of code how to use policies only with beforeRequest, how use with onResponse?
Provide function dispatch
in the store object that is passed to asyncTask
function.
Currently, the only way to provide params to the policies is by add them when you call the creator.
Would be better to allow passing the params in the requests configs. This way, we could use a policy this way:
const { creators, types } = createApiActions('namespace', {
list: {
url: 'enpoint',
method: 'get',
policies: ['anyPolicy', { name: 'policyWithParams', ...params }]
}
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.