Блог

В настоящее время я новичок в инструментарии react redux, и теперь я практикуюсь в этом управлении. Прямо сейчас я хочу переместить все данные из моего api в мои редукторы list_remarks начального состояния.

Вопрос: Как или где разместить мой api, чтобы перенести все данные из api в мой список начальных состояний?

Пример API: локальный хост:8000/api/list_remarks

Вот мой CreateSlice:

 import { createSlice } from '@reduxjs/toolkit';

export const RemarksSlice = createSlice({
    name:"check_in_remarks",
    initialState: {
        list_remarks:[],
        check_in_remarks: null,
    },
    reducers: {
        list_remarks: (state, action) => {
            state.remarks = action.payload
        },
        add_check_in_remarks: (state, action) => {
            state.check_in_remarks = action.payload
        }
    }
})

export const { add_check_in_remarks, list_remarks } = RemarksSlice.actions;

export const AddRemarks = (state) => state.check_in_remarks.check_in_remarks;
export const ListRemarks = (state) => state.list_remarks.list_remarks;

export default RemarksSlice.reducer;
 

Вы можете использовать createAsyncThunk ссылку:https://redux-toolkit.js.org/api/createAsyncThunk

Я могу предоставить вам базовый фрагмент, который может вам помочь

 export const getPosts = createAsyncThunk(
    'posts/getPosts',

    async (arg, { dispatch, getState, extra, requestId, signal, rejectWithValue }) => {
      
        return fetch(
            `https://jsonplaceholder.typicode.com/posts?_limit=${arg.limit}`
        ).then((res) => {
            if (!res.ok) {
                
                return rejectWithValue([], "api url not found from");
            }
            return res.json()
        }).catch(error => {
           
            return rejectWithValue([], error);
           
        })
    }

)
 

В createSlice

     export const RemarksSlice = createSlice({
    name:"check_in_remarks",
    initialState: {
        list_remarks:[],
        check_in_remarks: null,
status :null
    },
    reducers: {
        list_remarks: (state, action) => {
            state.remarks = action.payload
        },
        add_check_in_remarks: (state, action) => {
            state.check_in_remarks = action.payload
        }
    },
     extraReducers: {

        [getPosts.pending]: (state, action) => {
          
            state.status = 'loading'
        },
        [getPosts.fulfilled]: (state, { payload, meta }) => {

          
            state.list_remarks = payload
            state.status = 'success'
        },
        [getPosts.rejected]: (state, action) => {
            state.status = 'failed'
        },
    }
})
 

Чтобы отправить из любого места использования или в любом месте, которое вы хотели, затем

  React.useEffect(() => {
        dispatch(getPosts({ limit: 5 }));
       
    }, [])
 

добавьте метки набора действий и ошибку установки:

 reducers: {
...
   // Getting a list of remarks in a store
   setRemarks: (state, action) => {
      state.remarks = action.payload
   }
   // In case of problems with receiving, we will add an error to the store.
   setError: (state, action) => {
      state.error = action.payload
   }
... 
}
 

и добавьте asyncThunk (о функции createAsyncThunk):

    export const fetchRemaks = createAsyncThunk(
   'remarks/fetch',
   async (_, {dispatch}) => {
    // here is your receiving remarks function
    fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(remarks => dispatch(setRemarks(remarks)))
        .catch(error => dispatch(setError(error)))
   }
)
 

Как использовать:

 export default function App() {
  
  const [loading, setLoading] = useState(false)
  const dispatch = useDispatch()
  const { error } = useSelector(state => state.remarks)
  useEffect(() => {
    setLoading(true)
    dispatch(fetchRemaks())
    setLoading(false)
  })

  return (
    <div className="App">
     {error amp;amp; <b>{error}</b>}
     {loading 
        ? 'loading...'
        : 'remarks'
     }
    </div>
  );
}