如何使用 redux 更新状态

Question

我正在尝试构建简单的登录表单（来自 API 的授权数据）。所以我有 Slice for auth 这里是代码：

auth.js

import { createSlice } from '@reduxjs/toolkit'

export const authSlice = createSlice({
    name: 'auth',
    initialState: {
        isLoggedIn: false,
        token: null,
        role: null
    },
    reducers: {
        logIn: (state) => {
            state.isLoggedIn = true
        },
        role:(state, action) =>{
            state.role = action.payload
        },
        token:(state, action) =>{
            state.token = action.payload
        },
        logOut: (state) => {
            state.isLoggedIn = false
        },
    },
})

export default authSlice.reducer;



export const { logIn, logOut, role, token } = authSlice.actions

authService.js：

import axios from 'axios';
import { api } from '../api/index'


export function authenticateUser(username, password) {

    axios
        .post(api + 'login', {username, password})
        .then(res => {
            console.log(res.headers.authorization)
        })
}

LoginForm.js

import React, { Component } from 'react';
import { Form, Col, Button } from 'react-bootstrap';
import { IoMdLogIn } from "react-icons/all";
import { authenticateUser } from '../services/authService'

export default class LoginForm extends Component{

    constructor(props) {
        super(props);
        this.state = this.initialState;
        this.credentialsChange = this.credentialsChange.bind(this);
        this.userLogin= this.userLogin.bind(this);

    }


    initialState = {
        username: '', password: ''
    }

    userLogin = (e) => {
        e.preventDefault();
        authenticateUser(this.state.username, this.state.password);
        this.setState( () => this.initialState)
    }

    credentialsChange = e => {
        this.setState({
            [e.target.name]:e.target.value
        });
    }

    render(){


        const {username, password} = this.state;

        return(
          <Form onSubmit={this.userLogin}   id="loginFormId">
              <Form.Row>
                  <Form.Group as={Col} controlId="formGridCountry">
                      <Form.Label>Username</Form.Label>
                      <Form.Control required autoComplete="off"
                                    type="text" name="username"
                                    value={username}
                                    onChange={this.credentialsChange}
                                    className={"bg-light"}
                                    placeholder="Username" />
                  </Form.Group>
              </Form.Row>
              <Form.Row>
                  <Form.Group as={Col} controlId="formGridZipCode">
                      <Form.Label>Password</Form.Label>
                      <Form.Control required autoComplete="off"
                                    type="password" name="password"
                                    value={password}
                                    onChange={this.credentialsChange}
                                    className={"bg-light"}
                                    placeholder="Password" />
                  </Form.Group>
              </Form.Row>
              <Button type="submit" variant="success">
                    <IoMdLogIn />
              </Button>
          </Form>
        );
    }

}

我想要达到的是：我想在调用函数 authenticateUser 后更新状态 isLoggedIn：true。

我尝试使用const dispatch = useDispatch()，然后调用dispatch(logIn())，但它会抛出错误。

我应该在哪里调用调度程序来更新状态？

Answer 1

您需要在 api 响应中调用 AuthService.js 中的调度程序。 检查响应，如果没问题，存储它。如果你的 redux 实现得很好，它就会工作。

 axios
        .post(api + 'login', {username, password})
        .then(res => {
            console.log(res.headers.authorization)
            //Call it here, or create a function and call it here.

        })
}

如果它不起作用，请与我们分享错误