having problem in set payload in redux using createSlice() and createasyncthunk()

Question

component where I am using the state data

  const { contentTitles: ContentTitles } = useSelector((state) => state);
  const dispatch = useDispatch();
  useEffect(() => {
    const fetchData = async () => {
      const response = await dispatch(getContentTitles()).unwrap();
    };
  
    fetchData();
  }, [ContentTitles]);

slice

const contentTitles = JSON.parse(localStorage.getItem("contentTitles"));
export const getContentTitles = createAsyncThunk("contenttitles/getContenttitles", async (thunkAPI) => {
  try{
    const response = await contentitleService.getContenttitles();
    return { contentTitles: response };
  } catch (error) {
    const message =
      (error.response &&
        error.response.responsedata &&
        error.response.responsedata.message) ||
      error.message ||
      error.toString();
    thunkAPI.dispatch(setMessage(message));
    return thunkAPI.rejectWithValue();
  }
});

const initialState = contentTitles ? contentTitles : null
  
const contenttitleSlice = createSlice({
  name: "contenttitles",
  initialState,
  reducers: (state, action) => {
    state.contentTitles = action.payload.contentTitles;
  }
});

const { reducer } = contenttitleSlice;
export default reducer;

Can anyone tell me that why my data is not getting set to the redux? I am new to the redux and asyncthunk. I can't find the reason of not getting my redux state updated.

Dulaj Ariyaratne · Answer 1 · 2022-10-19T16:07:44.407

You have to define an extra actions (extraReducers) for this. Since your codebase is not clear to me, I will use a different example to explain it to you.

// First, create the thunk
const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId: number, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

 const initialState = {
    user: null
  }

const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {
    // Define your other actions here
  },
  extraReducers: (builder) => {
    // Add reducers for additional action types here, and handle loading state as needed
    builder.addCase(fetchUserById.fulfilled, (state, action) => {
      // Add user to the state array
      state.user = action.payload;
    })
  },
})

As you can see here, after the request completed, it will either be a success or error response. You have to define extra reducers to catch this. Above example shows a successful scenario. But you can define extra actions for following phases as well.

pending: 'users/requestStatus/pending'
fulfilled: 'users/requestStatus/fulfilled'
rejected: 'users/requestStatus/rejected'

score 0 · Answer 2 · answered Oct 20 '22 at 09:04

const initialState = contentTitles ? {contentTitles} : {contentTitles: null}
  
const contenttitleSlice = createSlice({
  name: "contenttitles",
  initialState,
  extraReducers: {
    [getContentTitles.fulfilled]: (state, action) => {
      state.contentTitles = action.payload.contentTitles
    },
  },
});

Yes, the extraReducers were missing. The above code of adding extraReducers in my specific scenario solved the problem.

having problem in set payload in redux using createSlice() and createasyncthunk()

2 Answers2