Не удается запустить createAsyncThunk из подключенного компонента React - PullRequest
Новая
       116

Не удается запустить createAsyncThunk из подключенного компонента React

0 голосов
/ 10 июля 2020

Я пытаюсь использовать createAsyncThunk для некоторых вызовов API, но не могу заставить его работать. Мои обычные действия работают, поэтому я должен правильно подключить свой компонент к redux, но мне не хватает createAsyncThunk. Вызов this.props.checkSession () снизу ничего не делает. Ни один из журналов console.logs внутри checkSession не печатается, fetch () никогда не попадает на сервер.

AppScreen 

import React from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import { checkSession } from './actions';
import { setToken } from './reducer';

class AppScreen extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("Mounted")
    this.props.checkSession();
    console.log("Moving on")
    if (!this.props.loading && !this.props.auth_token) {
      this.props.navigation.navigate('Auth')
    }
  }

  render() {
    if (this.props.loading) {
      return (
        <View style={{ flex: 1 }}>
          <ActivityIndicator />
        </View>
      )
    } else {
      return (
        <View>
          <Text>You're in! {this.props.auth_token}</Text>
        </View>
      )
    }
  }
}

function mapStateToProps(state) {
  return {
    user: state.app.user,
    auth_token: state.app.auth_token,
    loading: state.app.loading,
    error: state.app.error
  };
}

const mapDispatchToProps = dispatch => {
  return {
    checkSession: () => dispatch(checkSession),
    setToken: token => dispatch(setToken(token))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(AppScreen);

Действия 

import { createAsyncThunk } from "@reduxjs/toolkit";
import { API_URL, ENDPOINTS } from "./../constants";

export const checkSession = createAsyncThunk("checkSession", (thunkAPI) => {
  console.log("Running")
  let body = {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({auth_token: thunkAPI.getState().app.auth_token})
  }

  console.log("Checking session.")

  return fetch(`${API_URL}${ENDPOINTS.CHECK_SESSION}`, body)
    .then(response => {
      console.log(`API hit: ${response.ok}`)
      if (!response.ok) throw Error(response.statusText);
      return response.json();
    })
    .then(json => json);
});

Reducer 

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

import { checkSession } from "./actions"

const appSlice = createSlice({
  name: "app",
  initialState: {
    loading: true,
    auth_token: "",
    error: "",
    user: {}
  },
  reducers: {
    setToken: (state, action) => {
      state.auth_token = action.payload;
      state.loading = false;
    },
  },
  extraReducers: {
    [checkSession.pending]: state => {
      state.loading = true;
    },
    [checkSession.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    },
    [checkSession.fulfilled]: (state, action) => {
      state.loading = false;
      state.user = action.payload.user;
      state.auth_token = action.payload.auth_token;
    }
  }
});

export const { setToken } = appSlice.actions;
export const appReducer = appSlice.reducer;

Магазин 

import { appReducer } from "./App/reducer";
import { authReducer } from "./Auth/reducer";
import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";

const middleware = [
  ...getDefaultMiddleware(),
]

const store = configureStore({
  reducer: {
    app: appReducer,
    auth: authReducer
  },
  middleware,
});

export default store;

1 Ответ

2 голосов
/ 10 июля 2020

Вы неправильно используете checkSession. Это должно быть dispatch(checkSession()).

Тем не менее, вы также должны использовать сокращенную форму объекта mapDispatch, например: 

const mapDispatch = {checkSession, setToken};
...