Redux-axios-jwt NPM

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. Before axios call => trueOnce returns a callback => false`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.Once returns a callback => msg from .then response.status_code.catch error.response.status`let msg = useState((state) => state.api.message)`	api.message
`isUniversal`	data	object	`{}`	Get data inform of an objectCan be accessed from anywhere.`let universal = useState((state) => state.api.universal)`	api.universal
`changeValue`	namevalue	stringobject		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`	datalinktokenstateLoading	objectstringstringboolean	true	Sends post request and returns with an error or request. `et value = useState((state) => state.api[link])`	apilink
`getData`	paramslinktokenstateLoading	stringstringstringboolean	true	Sends get request and returns with an error or request.	api"GET-" + link
`getListData`	linktokenstateLoading	stringstringboolean	true	Sends get request and returns with an error or request.	apilink
`putDataParams`	datalinkparamstokenstateLoading	objectstringstringstringboolean	true	Sends put request with data and returns with an error or request.
`putDataSimple`	datalinktokenstateLoading	objectstringstringboolean	true	Sends put request with data and returns with an error or request.	apilink
`searchData`	paramslinktokenstateLoading	stringstringstringboolean	true	Sends get request with search params and returns with an error or request.	apilink
`deleteData`	paramslinktokenstateLoading	stringstringstringboolean	stringstringstringboolean	true	Sends delete request with params and returns with an error or request.	apilink

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. Before axios call => trueOnce returns a callback => false`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.Once returns a callback => msg from .then response.status_code.catch error.response.status`let msg = useState((state) => state.user.message)`	user.message
`changeValue`	namevalue	stringobject		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`	userNamepassworduserDetailsLink	stringstringstring	"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_tokenuser.user_data