How to make POST API Request in Redux Toolkit with headers

Question

Here is my data

 var data = JSON.stringify({
  "RegisterOnlyNewLead": true,
  "LeadFields": [
    {
      "Attribute": "mx_Portal_Confirm_Password",
      "Value": "Samplepassword12345"
    },
    {
      "Attribute": "mx_Portal_Password",
      "Value": "Samplepassword12345"
    },
    {
      "Attribute": "EmailAddress",
      "Value": "johnwick1263@example.com"
    }
  ]

My Axios config file

 var config = {
  method: 'post',
  url: 'https://portalapi.leadsquared.com/api/Authentication/Register?accessKey=u$rab680a72fbd14b1b1cb91a7a91b2c330&secretKey=d39dc85211959db0115594530c07a8268243f937',
  headers: {
    'Authorization': 'eUxOeEVXLytCSFh4RHVrNk4ySDhsS3U1TVVOMG44a0dIdGJwQ0c3T1NRbHlvNmczM0tLV0VYK3NrNEJ1Yi9adGo0TWdPK1hRWEJnMU5GRE9rbnIvbGxiNGJ4aUlwdzByMWU3VHB6enF5bUlmc2UxTUJpRUVUdUxNV083VFpMTXptUVVkNXpZMXIzbEt1U2tBODdwVm9BRUY0NmpyeDVWYkxGTzhXOUtHaXpnN0l5em5WNTc5eXZBRVFZajYvRmhrSXpGa0YwK3VIWEtYWUpwR2w1QzJDUT09',
    'Content-Type': 'application/json'
  },
  data: data
};

And here I am making a Post request

  axios(config)
  .then(function (response) {
    console.log(JSON.stringify(response.data));
  })
  .catch(function (error) {
    console.log(error);
  });

I want to make this exact type of POST request with headers in the redux toolkit, although I have a clear understanding of React Redux and I have made all types of REST API Requests in React-Redux, I am unable to make this POST Request in Redux Toolkit

Answer 1

I would recommend using createAsyncThunk its built into redux-toolkit. Take note of the extraReducers which you can use to handle the response back from the server.

createAsyncThunk: https://redux-toolkit.js.org/api/createAsyncThunk

extraReducers: https://redux-toolkit.js.org/api/createSlice#extrareducers

const postData = createAsyncThunk(
    'postData',
    async (data, thunkAPI) => {

        const config = {
            method: 'post',
            url: '',
            headers: {
                'Authorization': '',
                'Content-Type': ''
            },
            data: data
        };

        const response = await axios(config)
            .then(function (response) {
            console.log(JSON.stringify(response.data));
            })
            .catch(function (error) {
            console.log(error);
            });
        return response.data
    }
)

const initialState = {};

// Then, handle actions in your reducers:
const dataSlice = createSlice({
    name: 'data',
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        // Do something while pending if you want.
        builder.addCase(postData.pending, (state, action) => {})
        // Do something when passes.
        builder.addCase(postData.fulfilled, (state, action) => {})
        // Do something if fails.
        builder.addCase(postData.rejected, (state, action) => {})
    },
})