Реагировать Redux initialState выборку из Api - PullRequest
Новая
       11

Реагировать Redux initialState выборку из Api

0 голосов
/ 05 июня 2019

Я использую аутентификацию JWT, когда пользователь входит в систему, я сохраняю токен в локальном хранилище. Как мне получить API с этим токеном, чтобы я мог получить информацию о пользователе, когда страница загружается впервые.

Я уже использую React Thunk для асинхронных запросов, но я не знаю, как установить initialState с помощью асинхронного запроса. Однако можно ли установить местное хранилище в редукторах?

1 Ответ

2 голосов
/ 05 июня 2019

Вы бы хотели сделать что-то подобное в своем действии: 

import axios from 'axios';

export const LOADING = "LOADING";
export const SUCCESS = "SUCCESS";
export const FAILURE = "FAILURE";
export const UPDATE = "UPDATE";
export const SUCCESSFUL_UPDATE = "SUCCESSFUL_UPDATE";

export const getSmurfs = () => dispatch => {
    dispatch({ type: LOADING })
  axios.get('http://localhost:3333/smurfs')
    .then(res => dispatch({ type: SUCCESS, payload: res.data}))
    .catch(err => dispatch({ type: FAILURE, payload: err}))
}

Таким образом, вы начнете с состояния загрузки, которое изменится на Успех или Отказ в зависимости от ответа. Тогда в вашем редукторе вы захотите сделать что-то вроде: 

import { LOADING, SUCCESS, FAILURE, UPDATE, SUCCESSFUL_UPDATE } from '../actions/index';

const initialState = {
  smurfs: [],
  loading: false,
  error: "",
  updateID: "",
  clicked: false,
  update: []
}

export default function reducer(state= initialState, action) {
  switch(action.type) {
    case LOADING:
      return {
        ...state,
        smurfs: [],
        loading: true,
        err: ''
      }

    case SUCCESS:
      return {
        ...state,
        smurfs: action.payload,
        loading: false,
        err: ''
      }

В основном, когда он успешен, он выключает загрузку и отображает ваши возвращенные данные 

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { getSmurfs, deleteSmurf, update } from '../actions/index';

import Smurfs from './smurfs';
import Form from './form';
import UpdateForm from './updateForm';

class SmurfsViewer extends Component {

    componentDidMount() {
        this.props.getSmurfs()
    }

    render() {
        console.log(this.props.smurfs)
        // if loading returns true then display loading smurfs..
        if(this.props.loading) {
            return (<h1>LOADING SMURFS....</h1>)
        }

        //if clicked resolves true then display the form to allow updating of the smurf that had its edit button clicked
        let form;
        if(this.props.clicked) {
            form = <UpdateForm />
        } else {
            form = <Form />
        }

        return(
            <div>
                <Smurfs smurfs={this.props.smurfs} deleteSmurf={this.props.deleteSmurf} update={this.props.update}/>
                {form}
            </div>
        )
    }
}

const mstp = state => {
    console.log("FROM VIEWER:", state)
    return {
        smurfs: state.smurfs,
        loading: state.loading,
        clicked: state.clicked
    }
}

export default connect(mstp, { getSmurfs, deleteSmurf, update })(SmurfsViewer);

Таким образом, вам нужно отправить состояние из Redux через mapStateToProps (mstp) и подключить методы. Затем вы можете использовать их в компоненте, и он будет обновлять ваше состояние при необходимости. Тогда просто назовите их как this.props.getSmurfs или что-то в этом роде

...