questions about projectSlice, reducers & store

[BorisTherin]

as we want to go into buisness with our redux store after this one POC, we need to have a look for our best options & practices.

• this one video expose some nice practices, like a components props directly bind to our store:

  • https://frontendmasters.com/courses/redux-fundamentals/extra-reducers/

• extraReducers.addMatcher() method shall be something helpfull to sort our actions ("GET" => projectList hook state update)

  • https://redux-toolkit.js.org/api/createReducer#builderaddmatcher

• this one article tell about an extra argument for createAsyncThunk to fetch data from an API: (a bit weird as the extra argument is used in the function, but sounds interresting to dig further)

  • https://medium.com/@mindsurfingclub/redux-toolkit-extra-reducer-explained-createasyncthunk-1480c54e8b58
  • payloadCreator: A function that should return a promise that resolves with the payload of the fulfilled action. This function can also accept an optional second argument, which is an object that contains some extra properties that are passed to the thunk by default. For example, you might pass an extra object that contains an API client, so that the thunk can use that client to make API requests.

    
    import { createAsyncThunk } from "@reduxjs/toolkit";
    import axios from "axios";

const fetchUserData = createAsyncThunk( "user/fetchUserData", async (userId, { extra }) => { //const { apiClient } = extra; const response = await axios.get(/users/${userId}); return response.data; } );

export default fetchUserData;

[BorisTherin]

i found about that { apiClient } some pretty interresting things.

• => https://redux-toolkit.js.org/rtk-query/overview

RTK Query data fetching API has been provided for this purpose & sounds really easier to code

take a look @

• https://redux-toolkit.js.org/rtk-query/usage/examples
• https://github.com/reduxjs/redux-toolkit/tree/master/examples/query/react
• https://github.com/xgrommx/awesome-redux pretty powerfull examples here

[BorisTherin]

!IMPORTANT

Read or leave redux !

• https://redux-toolkit.js.org/usage/immer-reducers

mutable immutability isn't a jok' & u really want immer to rule this !

• boring & very strict things for CPU => immer
• readabilty & design for human, (until u got it)

[BorisTherin]

aussi pour console.log correctement un proxy array avec la methode redux

(source: https://redux-toolkit.js.org/rtk-query/usage/examples )

[Jean-Baptiste-Lasselle]

About the state,the store, and the createSlice

const pestoInitialState: GetProjectsListRequestState = {
  projectList: [],
  status: "completed",
}

/// au dessus, c'est l'objetquo'n créée pour y coller les pesto projects que l'on récupère de l'API

export const pestoProjectSlice = createSlice({
  name: "pestoProject",
  initialState: {
    ...pestoInitialState,
    voudrais: {
      je: "faire",
      truc:{
        de: {
          ouf: "wouaaa"
        }
      }
    }
  },
  reducers: {
    /* EMPTY */
    // setItem: addItem
  },
  extraReducers: (builder) => {
    /**
     * Create Pesto Project Reducer 
     */
    builder
      .addCase(createPestoProjectAsync.pending, (state) => {
        state.status = "pending"
        console.log(" PESTO REDUCER [createPestoProjectAsync] pending...")
        console.log(` PESTO REDUCER [createPestoProjectAsync] [${state.voudrais.je + ' /// ' + state.voudrais.truc.de.ouf }]`)
        console.log(`${state.voudrais.je}`)
        console.log(`${state.voudrais.truc.de.ouf}`)

[Jean-Baptiste-Lasselle]

oh là, là j'ai trouvé un truc à essayer pour la mise à jour du store: https://redux-toolkit.js.org/rtk-query/usage/migrating-to-rtk-query#slice