Как сделать вызов API с помощью createSlice - PullRequest
Новая
       35

Как сделать вызов API с помощью createSlice

1 голос
/ 19 февраля 2020

Я изо всех сил пытался понять, где я делаю асинхронные c вызовы при использовании createSlice из redux-takekit. Я попытался следовать документам, но заблудился со всеми вещами TypeScript. (Я не использую TS) У меня есть компонент Login: 

import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  login,
} from "./loginSlice";

import styles from "./Login.module.css";

export const Login = () => {
  const dispatch = useDispatch();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const payload ={
    email: email,
    password: password
  }

  return (
    <form>
      <input
        type="email"
        name="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <input
        type="password"
        name="password"
        value="passwordValue"
        onChange={e => setPassword(e.target.value)}
      />
    <button type="button" onClick={() => dispatch(login(payload))}>Submit</button>
    </form>
  );
};

и фрагмент входа в систему: 

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

export const slice = createSlice({
  name: "login",
  initialState: {
    email: "",
    password: "",
    user: null,
    token: null
  },
  reducers: {
    login: (state, action) => {
      console.log(action.payload.email);
      console.log(action.payload.password);
      const { email, password } = action.payload;
      state.email = email;
      state.password = password;
    },
    logout: state => {
      state.email = "";
      state.password = "";
    }
  }
});

export const { login, logout } = slice.actions;

export default slice.reducer;

, и я хочу вызвать мой API для получения токена: 

const authData = {
        username: email,
        password: password
    };
    let url = 'http://127.0.0.1:8080/api-token-auth/';

    axios.post(url, authData)
      .then(res => {

        if (res.status === 200) {
          console.log(res);
          const authCreds = {
            userId: res.data.pk,
            token: res.data.token,
          }
          return authCreds;
        }
        throw res;
      })
      .then(authCreds => {
        dispatch({
            type: "LOGIN",
            payload: authCreds
        })
      })
      .catch(error => {
        setIsSubmitting(false)
        setErrorMessage(error.message || error.statusText)
      });

Где я go о звонке. Заранее благодарим за любые идеи, которые вы можете предоставить!

1 Ответ

1 голос
/ 20 февраля 2020

от пользователя acemark в reactjs subreddit:

FWIW, ничего не нужно делать в асинхронных c вызовах с изменениями Redux с помощью Redux Toolkit.

Вы по-прежнему используете промежуточное программное обеспечение asyn c (как правило, избыточный-thunk), извлечение данных и действия по отправке с результатами.

Следующая версия Redux Toolkit будет включать вспомогательный метод createAsyncThunk, который выполняет некоторые действия, диспетчеризируемые для вы, но это все тот же стандартный процесс.

Итак, в общем случае ваш файл слайса будет иметь что-то вроде: 

const usersSlice = createSlice({
    name: "users",
    initialState: {
        loading: 'idle',
        users: []
    },
    reducers: {
        usersLoading(state, action) {
            // Use a "state machine" approach for loading state instead of booleans
            if(state.loading === 'idle') {
                state.loading = 'pending'
            }
        },
        usersReceived(state, action) {
            if(state.loading === 'pending') {
                state.loading = 'idle'
                state.users = action.payload
            }
        }
    }
})

const {usersLoading, usersReceived} = usersSlice.actions;

const fetchUsers = () => async dispatch => {
    dispatch(usersLoading());
    const response = await usersAPI.fetchAll()
    dispatch(usersReceived(response.data));

}

И тогда вы будете выполнять диспетчеризацию (fetchUsers ()) в вашем компоненте где-то.

Надеюсь, это направит вас в правильном направлении!

...