[FIXED] How to use react redux to show data that comes from an api inside an option select?

Issue

After making the request for a locale API, I have to get the response data and put it inside a select. To find out if the request was ok, I made a console.log (DATA STATE) and got the following return:

DATA STATE 
{data: Array(27), status: 200, statusText: "OK", headers: AxiosHeaders, config: Object…}
data: Array(27)
0: Object
id: 12
sigla: "AC"
nome: "Acre"
regiao: Object
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
9: Object
10: Object
11: Object
12: Object
13: Object
14: Object
15: Object
16: Object
17: Object
18: Object
19: Object
20: Object
21: Object
22: Object
23: Object
24: Object
25: Object
26: Object
status: 200
statusText: "OK"
headers: AxiosHeaders
config: Object
request: XMLHttpRequest

I tried to map the state select inside the SelectState component (states->index.js) , however, no information is returned. My goal is that when selecting a state (data.nome) in the SelectState component (states->index.js) the cities of state appear in the select of the SelectCity component (city->index.js). And after selecting the city, show information of the selected city as microregion, mesoregion in the InformationCity component (informationCity->index.js).

Note: in getInformationCity (informationCitySlice.js), the UF parameter must be passed to the endpoint https://servicodados.ibge.gov.br/api/v1/localidades/estados/{UF}/municipios

Code statesSlice.js

import React, { useState, useEffect } from "react";
import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { getStates } from "../states/statesSlice";

export const SelectState = () => {
  const dispatch = useDispatch();
  const states = useSelector((state) => state.states.dataState);
  const [stateSelected, setStateSelected] = useState("");

  useEffect(() => {
    dispatch(getStates());
  }, [dispatch]);

  const handleChange = (event) => {
    dispatch(setStateSelected(event.target.value));
  };

  return (
    <FormControl sx={{ m: 1, minWidth: 120 }} size="small">
      <InputLabel id="demo-select-small">State</InputLabel>
      <Select
        labelId="demo-select-small"
        id="demo-select-small"
        value={stateSelected}
        label="estados"
        onChange={handleChange}
      >
        <MenuItem disabled>Select a state</MenuItem>
        {states.length > 0 &&
          states.map((item) => (
            <MenuItem key={item.id} value={item.sigla}>
              {item.nome}
            </MenuItem>
          ))}
      </Select>
    </FormControl>
  );
};

Follow the code link in codesandbox

What can I try next? I'm new to Redux. I already created the store.js, slices and provider in index.js.

Solution

You can add setState function this way:

export const setState = createAsyncThunk(
  "state/setState",
  async (selectedState, { rejectWithValue }) => {
    try {
      return selectedState;
    } catch (err) {
      return rejectWithValue([], err);
    }
  }
);

And in the reducers list,

    builder.addCase(setState.fulfilled, (state, action) => {
      state.selectedState = action.payload;
    });

And then call the setState function to set the selected state:

dispatch(setState(e.target.value));

The same approach has been applied to getCities as well.

The code is a bit lengthy, but I guess this might be better for the maintenance and expansion of the codebase in the future.

The working demo is here: https://codesandbox.io/s/createasyncthunk-createslice-redux-forked-9qwene?file=/src/features/states/statesSlice.js

Answered By - Dream Bold
Answer Checked By - - Jay B. (ReactFix Admin)