从 Api 获取 React Redux initialState

Question

我正在使用 JWT 身份验证，当用户登录时，我将令牌存储在本地存储中。我如何使用该令牌获取 api ，以便在页面时获取用户详细信息第一次加载。

我已经在使用 React Thunk 处理异步请求，但我不知道如何使用异步请求设置 initialState。然而，在 reducer 中设置 localstorage 可以吗？

Answer 1

你会想在你的行动中做这样的事情：

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);

因此您需要通过 mapStateToProps(mstp) 和 connect 方法从 Redux 发送状态。然后你可以在组件中使用它们，它会根据需要更新你的 redux 状态。然后将它们称为 this.props.getSmurfs 或类似的东西

从 Api 获取 React Redux initialState

React Redux initialState fetch from Api

reactjs

redux-thunk

react-redux