redux-axios-jwt
Kind of like a boilerplate. Plug and play, use with DJango, DRF Rest APIs.
Setting up
Installing package using NPM.
npm install redux-axios-jwt
Once installed, you know need to link package with your application.
Note: Before setting up make sure you have redux setup already.
Defining URL & AuthKey (Example)
Default URL value is https://localhost:3000
Open main parent index.js file and add following lines of code.
...
import setURL form 'redux-axios-jwt'
let URL = 'http://localhost:8000/api' // server url for the apis
let AuthKey = "Basic" // Key value for Authorization in Headers.
setURL(URL, AuthKey)
...
API setURL()
| Name | Type | Default | Description |
|---|---|---|---|
| URL | string | "http://localhost:3000" |
Server URL, call to be made to. |
| AuthKey | string | "Basic" |
Key value required for JWT Authorization in headers' |
API Actions / Reducers
To use apiAction, you first need to link its reducers with the store. Open reducers index.js file and add in following lines.
...
import apiReducers from "redux-axios-jwt/reducers/apiReducers";
export default combineReducers({
...
api: apiReducers,
...
});
...Actions List
| Name | Params | Type | Params Defaults | Description | State |
|---|---|---|---|---|---|
isLoading |
status | Boolean | false | This action runs by default (if stateLoading = true), enabling to be run at parent component level. This is linked with each action that makes an Axios call, hence follows following rules.
let loading = useState((state) => state.api.isLoading)
|
api.isLoading |
returnMsg |
message | string | "" |
This action runs by default, enabling to be run at parent component level. This is linked with each action that makes an Axios call, hence follows following rules.
let msg = useState((state) => state.api.message)
|
api.message |
isUniversal |
data | object | {} |
Get data inform of an object Can be accessed from anywhere. let universal = useState((state) => state.api.universal)
|
api.universal |
changeValue |
name value |
string object |
Stores any value against a key. Can be used in forms as handleChange. Can be accessed from anywhere.let value = useState((state) => state.api.value)
|
api.value | |
resetValue |
Reset value of redux to default. Can be used once you are done using value param, for e.g. after completing form and submitting it to the post request. Its not called automatically by any other action. | ||||
postData |
data link token stateLoading |
object string string boolean |
true |
Sends post request and returns with an error or request. et value = useState((state) => state.api[link])
|
api[link] |
getData |
params link token stateLoading |
string string string boolean |
true |
Sends get request and returns with an error or request. | api["GET-" + link] |
getListData |
link token stateLoading |
string string boolean |
true |
Sends get request and returns with an error or request. | api[link] |
putDataParams |
data link params token stateLoading |
object string string string boolean |
true |
Sends put request with data and returns with an error or request. | |
putDataSimple |
data link token stateLoading |
object string string boolean |
true |
Sends put request with data and returns with an error or request. | api[link] |
searchData |
params link token stateLoading |
string string string boolean |
true |
Sends get request with search params and returns with an error or request. | api[link] |
deleteData |
params link token stateLoading |
string string string boolean |
string string string boolean |
true |
Sends delete request with params and returns with an error or request. |
API Actions / Reducers
To use userActions, you first need to link its reducers with the store. Open reducers index.js file and add in following lines.
...
import userReducers from "redux-axios-jwt/reducers/userReducers";
export default combineReducers({
...
user: userReducers,
...
});
...Actions List
| Name | Params | Type | Params Defaults | Description | State |
|---|---|---|---|---|---|
isLoading |
status | Boolean | false | This action runs by default (if stateLoading = true), enabling to be run at parent component level. This is linked with each action that makes an Axios call, hence follows following rules.
let loading = useState((state) => state.user.isLoading)
|
user.isLoading |
returnMsg |
message | string | "" |
This action runs by default, enabling to be run at parent component level. This is linked with each action that makes an Axios call, hence follows following rules.
let msg = useState((state) => state.user.message)
|
user.message |
changeValue |
name value |
string object |
Stores any value against a key. Can be used in forms as handleChange. Can be accessed from anywhere.let value = useState((state) => state.user.value)
|
user.value | |
firstTimeLoad |
Insert at the time when app renders for the first time. User auth credentials gets loaded on first time load, hence automatically logins. |
||||
loginUser |
userName password userDetailsLink |
string string string |
"accounts/getuser/" |
Login user using username and password. On success gets token and refresh token which than gets stored in localstorage. Send an api call to get userdetails too. Gets stored in user_data. |
user.id_token user.user_data |