如何使用 redux 更新 state

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

登錄表單.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>
        );
    }

}

我想要達到的是：我想在調用 function authenticateUser 后更新 state isLoggedIn: true。

我嘗試使用const dispatch = useDispatch()然后調用dispatch(logIn())但它拋出錯誤。

我應該在哪里致電調度員更新 state？

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.

        })
}

如果它不起作用，請與我們分享錯誤